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

【问题标题】：Swiper.js navigation buttons disappear in production modeSwiper.js 导航按钮在生产模式下消失
【发布时间】：2021-02-28 17:51:54
【问题描述】：

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>

感谢您的帮助

【问题讨论】：

标签： next.js swiper swiper.js

【解决方案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';

似乎在生产模式下它没有附加 swiper 模块 scss。

【讨论】：