Can't import CSS from Swiper using Webpack with error "Module parse failed: Unexpected character '@' You may need an appropriate loader"

Question

I have a project using SCSS. In this project a minified CSS file is generated during compilation. Now I wanted to add Swiper to the project. So I tried to import the correspodning styles before my styles in index.js. Unfortunately I get an error during compillation:

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

This is how my index.js looks:

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

This is how my webpack.config.js looks:

module.exports = {
  entry: './src/js/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css'
    }),
  ],

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
};

What do I need to change in order to make it work?

Answer 1

Check if you have node_modules excluded in your webpack config. That fixed it for me.

Answer 2

Try adding following code to the webpack.config.js file:

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
 }

Answer 3

In my case it was a an incorrect path for importing the styles.

For finding the appropriate path based on version of swiper, go to node_modules and find the swiper folder. Then open up package.json file and look for exports field. there you can find what should be the import path of the corresponding module.

For example for Pagination and Navigation I have

"exports": {
     "./core": "./swiper.esm.js",
     "./css/navigation": "./modules/navigation/navigation.min.css",
     "./css/pagination": "./modules/pagination/pagination.min.css",
     /// ...
}

So import paths will be

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";