Webpack 4升级后报错：Module parse failed: Unexpected character '@'

我帮你排查了下，你遇到的Module parse failed: Unexpected character '@'错误，核心原因是Webpack 4已经不再推荐使用extract-text-webpack-plugin，这个插件的beta版本虽然声称支持Webpack 4，但在处理SCSS的@import语法时存在兼容性bug，无法正确让sass-loader优先解析SCSS语法。下面是具体的修复步骤：

步骤1：替换CSS提取插件 #

先卸载旧的extract-text-webpack-plugin，安装Webpack 4官方推荐的mini-css-extract-plugin：

npm uninstall extract-text-webpack-plugin
npm install mini-css-extract-plugin --save-dev

步骤2：修改Webpack配置文件 #

更新你的webpack.dev.js，把所有和ExtractTextPlugin相关的代码替换成mini-css-extract-plugin的用法：

const StyleLintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 替换插件引入
const Dotenv = require('dotenv-webpack');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'public/bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: ['babel-loader', 'eslint-loader'] },
      { 
        test: /\.scss$/, 
        use: [
          MiniCssExtractPlugin.loader, // 替换ExtractTextPlugin.extract方法
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new StyleLintPlugin({ configFile: '.stylelintrc', context: 'src', files: '**/*.scss', failOnError: false, quiet: false, syntax: 'scss' }),
    new MiniCssExtractPlugin({ filename: 'public/style.css' }), // 替换插件实例
    new Dotenv()
  ]
};

步骤3：验证路径与依赖兼容性 #

• 确认你的scss/variables.scss路径正确：从src/index.js出发，这个路径对应src/scss/variables.scss，如果文件实际位置不符，记得调整路径。
• 你的node-sass@4.9.0和sass-loader@6.0.7版本是兼容的，这部分不需要额外调整。

最后测试 #

删除项目根目录下的node_modules/.cache文件夹（如果存在），然后重新运行你的脚本：

npm run watch

这样应该就能正常解析SCSS文件里的@import语法，不会再出现@符号解析失败的错误了。

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