webpackでjsプラグインのcssの読み込み方

Question

前提・実現したいこと

以下のようなwebpackの設定で、jsプラグイン（例えばSwiper.js）をnpmで読み込ませたいのですが、cssを読み込ませようとするとエラーになります。

どうすればいいでしょうか？

※jsとcssは別ファイルで出力されます（extract-text-webpack-pluginを使用）

試したこと

現状、import Swiper from 'swiper';でjsは問題なく読み込めます。
しかし、import 'swiper/swiper-bundle.css';でcssを読み込ませるとエラーになります。
なので、cssはCDN経由で読み込ませています。

参考：Swiper.jsの公式ドキュメント
https://swiperjs.com/get-started/

index.js

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';

const swiper = new Swiper(...);

// 以降、その他のjsの処理など
// ・
// ・
// ・

webpack.common.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');

module.exports = {

  entry: {
    './assets/style.min.css': './_src/sass/index.sass',
    './assets/application.min.js': './_src/js/index.js',
  },

  output: {
    path: __dirname,
    filename: '[name]',
  },

  module: {
    rules: [{
        test: /.js$/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: 'env'
          }
        }],
        exclude: /node_modules/,
      },
      {
        test: /.sass$/,
        use: [
          ExtractTextPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              minimize: true,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: [
                autoprefixer({
                  browsers: 'last 2 versions',
                  grid: true
                })
              ]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
        ]
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin('[name]'),
  ]

};

webpack.dev.js

const merge = require('webpack-merge')
const common = require('./webpack.common.js')
const path = require('path')

module.exports = merge(common, {

  mode: 'development',

  devtool: 'source-map',

});

追記

watchやbuildをしようとすると、以下エラーメッセージが返ってきます。

ERROR in ./node_modules/swiper/swiper-bundle.css 13:0
Module parse failed: Unexpected character '@' (13:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Comments

[maisumakun]

どの段階でどのようなエラーが出ていますか？

[退会済みユーザー]

ご質問ありがとうございます。追記しましたので、お手数ですがご確認頂けますと幸いです。

Answer 1

エラーメッセージにno loaders are configured to process this fileとあるとおりで、CSS系のローダーに流す指定が/.sass$/となっているため、CSSをJavaScriptとして処理しようとして失敗しています。

.cssを処理するローダーの指定を追加してください。

Comments

[退会済みユーザー]

ありがとうございます。
`test: /.(sass|css)$/,`に変更して先程のエラーは解決しました。

しかし、次は以下のようなエラーが出てしまいました。
```
Module not found: Error: Can't resolve 'swiper/swiper-bundle.css'
```

node_modules内には'swiper/swiper-bundle.css'のファイルは存在するのですが、なぜnot-foundになってしまうのでしょうか？