swiper.scssがwebpackで取り込まれない

投稿日：

node

環境

  • webpack 4.44.1
  • swiper 6.0.0

事象

webpackでswiperを取り込んでビルドしようとした時の話。
swiper.scssがなぜか開発環境では取り込めてて、本番環境では取り込めてないという事象が起きました。

つまり、↓だとswiper.scssが取り込まれたCSSが出力されるんですが

node node_modules/webpack/bin/webpack.js --mode development

↓だとswiper.scssが取り込まれていないCSSが出力されます。

node node_modules/webpack/bin/webpack.js --mode production

対応

原因は結局不明だったのですが
swiperのバージョンを6.0.0から6.2.0に変更したら治りました。

事象が起きているときの状態

npmインストールしていたパッケージ

"devDependencies": {
  "css-loader": "^4.3.0",
  "mini-css-extract-plugin": "^0.11.2",
  "sass": "^1.26.10",
  "sass-loader": "^10.0.2",
  "style-loader": "^1.2.1",
  "swiper": "^6.0.0",
  "webpack": "^4.44.1",
  "webpack-cli": "^3.3.12"
}

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/js/index.js'),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, 'src/js')]
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    })
  ]
}

/src/js/index.js

import "swiper/swiper.scss";

～以下Javascriptの処理～