Webpack构建的SCSS项目导入Swiper CSS报‘Module parse failed: Unexpected character '@'’错误的解决方法咨询

问题根源 #

这问题我碰到过！本质是你的Webpack配置只处理了SCSS/SASS格式的样式文件，但完全没配置普通CSS文件的解析规则。当你导入swiper-bundle.css时，Webpack遇到文件里的@规则（比如@import或@media），却找不到对应的loader来处理，直接抛出了解析错误。

解决方案：新增CSS文件处理规则 #

改动很小，只需要在webpack.config.js的module.rules数组里，加一条专门匹配.css文件的规则就行。纯CSS不需要经过sass-loader编译，只需要用css-loader解析语法，再用MiniCssExtractPlugin提取到单独文件。

修改后的完整配置代码如下：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 别忘了导入插件，你原来的配置里应该漏写了这行

module.exports = {
 entry: './src/js/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 plugins: [
 new MiniCssExtractPlugin({ filename: 'styles.css' }),
 ],
 module: {
 rules: [
 // 新增：处理普通CSS文件的规则
 {
 test: /\.css$/i,
 use: [
 MiniCssExtractPlugin.loader,
 {
 loader: 'css-loader',
 options: { url: false, },
 },
 ],
 },
 // 原有的SCSS/SASS处理规则保留不变
 {
 test: /\.s[ac]ss$/i,
 use: [
 MiniCssExtractPlugin.loader,
 {
 loader: 'css-loader',
 options: { url: false, },
 },
 {
 loader: 'sass-loader',
 options: { sourceMap: true, },
 },
 ],
 },
 ],
 },
};

简单解释下改动逻辑 #

• test: /\.css$/i 会匹配所有.css后缀的文件（包括你导入的Swiper样式文件）
• css-loader负责解析CSS里的@import、url()等语法，让Webpack能正确识别这些依赖
• MiniCssExtractPlugin.loader会把解析后的CSS提取到你指定的styles.css文件里，和你的自定义SCSS编译结果合并

改完之后重新编译，Webpack就能正常处理Swiper的CSS文件，报错问题就解决啦！

内容的提问来源于stack exchange，提问作者lampshade