无法使用 Webpack 从 Swipeper 导入 CSS，并显示错误"Module parse failed: Unexpected character '@' You may need an

Question

我有一个使用SCSS的项目。在这个项目中，在编译过程中生成一个缩小的CSS文件。现在我想将Swiper添加到项目中。所以我尝试在index.js的样式之前导入相应的样式。不幸的是，我在编译过程中得到一个错误:

ERROR in ./node_modules/swiper/swiper-bundle.css 13:0
模块解析失败:意外字符'@' (13:0)
你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件。看到https://webpack.js.org/concepts装载机

这是我的index.js看起来:

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

这是我的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,
},
},
],
},
],
},
};

我需要改变什么才能使它工作?

Answer 1

检查您的webpack配置中是否排除了node_modules。这为我解决了这个问题。

Answer 2

尝试在webpack.config.js文件中添加以下代码:

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

Answer 3

在我的例子中，这是一个导入样式的错误路径。

根据swiper的版本找到合适的路径，转到node_modules并找到swiper文件夹。然后打开package.json文件，查找exports字段。在这里，您可以找到相应模块的导入路径。

例如，对于分页和导航，我有

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

所以导入路径是

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