Webpack CSS @import报错：Module parse failed: Unexpected character '@'求助

核心原因 #

报错里的@字符（通常是CSS中的@import、@media等规则）无法被Webpack解析，说明CSS文件的loader配置存在问题——即便安装了style-loader和css-loader，也可能因配置错误、版本不兼容或冲突导致无法生效。

具体解决方案 #

1. 检查Webpack配置的Loader规则 #

确保webpack.config.js中正确配置了CSS文件的处理规则，且loader顺序不可颠倒（Webpack loader从右到左执行，css-loader必须在style-loader之后）：

module.exports = {
  // ...其他配置（entry、output等）
  module: {
    rules: [
      {
        test: /\.css$/i, // 精准匹配所有.css后缀文件
        use: ['style-loader', 'css-loader'], // 顺序不能反
      },
    ],
  },
};

• css-loader：负责解析CSS中的@import、url()等依赖关系
• style-loader：将解析后的CSS代码注入到DOM中

2. 验证Loader与Webpack版本兼容性 #

不同版本的Webpack对loader版本有要求：

• Webpack 5：建议安装最新版的style-loader和css-loader
• Webpack 4：需安装适配版本（如css-loader@5.x、style-loader@2.x）

执行以下命令查看当前版本：

npm list style-loader css-loader

若版本不兼容，卸载后重新安装对应版本：

npm uninstall style-loader css-loader
# Webpack5 安装最新版
npm install style-loader css-loader --save-dev
# Webpack4 指定适配版本
npm install style-loader@2.0.0 css-loader@5.2.7 --save-dev

3. 移除冲突的Loader配置 #

如果之前尝试过raw-loader，需确保配置中没有同时用raw-loader处理.css文件——raw-loader会将CSS视为纯文本，无法解析@规则，会和css-loader产生冲突。

4. 确认CSS文件的引入方式 #

确保在项目入口文件（如index.js）中正确引入CSS：

import './ticker.css';

5. 清除缓存并重新构建 #

• 删除node_modules/.cache目录（Webpack缓存目录）
• 删除dist输出目录
• 重新执行npm start

额外排查点 #

如果CSS中包含@import外部CSS文件，可配置css-loader的importLoaders确保多层依赖被正确解析：

{
  test: /\.css$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1, // 确保@import的文件也被后续loader处理
      },
    },
  ],
}

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