Webpack5配置babel后构建报Unexpected character '@'错误

云上老周

2026-8-29

问题原因

你在module.rules里把SCSS处理规则和Babel处理规则写在了同一个配置对象中。JS对象的同名属性会被后写入的值覆盖，最终这个规则对象里仅Babel的配置生效，原本配置的SCSS处理规则完全失效，等于没有为.scss后缀的文件匹配任何处理loader。
Webpack默认会将所有import引入的文件按JS语法解析，当读取到main.scss第一行的@import语法时，无法识别位置1:0的@字符，直接抛出Module parse failed: Unexpected character '@' (1:0)错误。

修复方案

将SCSS和Babel的处理规则拆为module.rules数组下两个独立的配置对象，分别匹配对应后缀的文件即可。

修正后的webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    bundle: path.resolve(__dirname, "src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      // SCSS文件处理规则
      {
        test: /\.scss$/,
        use: [
          "style-loader", // 将样式注入DOM
          "css-loader", // 将CSS转为CommonJS模块
          "sass-loader", // 将SCSS编译为CSS
        ],
      },
      // JS文件Babel转译规则
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack App",
      filename: "index.html",
      template: "src/template.html",
    }),
  ],
};

验证方式

配置修改完成后，重新执行npm run build命令，Babel会正常转译JS语法，Sass相关loader会正常处理SCSS样式，两者可协同运行，不会再出现字符解析错误。