Swiper.js导航按钮在生产模式下消失

Question

Swiper.js导航按钮消失在生产模式中

Swiper.Js导航按钮显示在开发中，但没有显示在产品中。

next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass({
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000
        }
      }
    });

    return config;
  }
}));

_app.js

import 'swiper/swiper.scss';
import 'swiper/css/swiper.css';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
import 'swiper/components/effect-cube/effect-cube.scss';

我的组件

SwiperCore.use([Navigation, Scrollbar, A11y]);

 <Swiper  
          threshold="50"
          navigation
          style={{ width: '100%', height: '98%', }}
          scrollbar={{ draggable: true }}
          initialSlide={sliderIndex}    
        >
          <SwiperSlide className={classes.slider}>
            {createPages(0, 8, 0)}
          </SwiperSlide>

          <SwiperSlide className={classes.slider}>
            {createPages(8, 16, 1)}
          </SwiperSlide>

</Swiper>

谢谢你的帮助

Answer 1

将导入样式从_App.js移动到您的主scss文件。

import 'swiper/swiper.scss';
import 'swiper/css/swiper.css';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
import 'swiper/components/effect-cube/effect-cube.scss';

它似乎在生产模式，它没有附加刷卡模块，scss。

Answer 2

我也有一个类似的问题:当我改变屏幕的大小时，我失去了我的自定义分页和导航按钮，当我刷新页面时，我会把它们拿回来。我解决问题的办法如下：

<div className="slider-wrapper">

• I为分页和导航创建了新元素：

<div className="prev">
<div className="next">
<div className="pagination">

它们在刷卡中的定义如下：

pagination={{ el: ".pagination", clickable: true }}
navigation={{
  prevEl: ".prev",
  nextEl: ".next",
}}

此外，我还将所有元素(Swiper、分页和导航)都放在<div className="slider-wrapper">中