Tengo un proyecto usando SCSS. En este proyecto se genera un archivo CSS minimizado durante la compilación. Ahora quería agregar Swiper al proyecto. Así que traté de importar los estilos correspondientes antes de mis estilos en index.js . Lamentablemente recibo un error durante la compilación:

ERROR en ./node_modules/swiper/swiper-bundle.css 13:0
Error al analizar el módulo: carácter inesperado '@' (13:0)
Es posible que necesite un cargador apropiado para manejar este tipo de archivo, actualmente no hay cargadores configurados para procesar este archivo. Consulte https://webpack.js.org/concepts#loaders

Así es como se ve mi index.js :

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

Así es como se ve mi webpack.config.js :

 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, }, }, ], }, ], }, };

¿Qué debo cambiar para que funcione?