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。

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

Swiper.js navigation buttons disappear in production mode

next.js

swiper

swiper.js