执行npm run dev编译SCSS时遇Webpack解析错误：Unexpected character '@'

嘿，我仔细看了你的报错信息和配置文件，这个Unexpected character '@'的问题其实是webpack没法正确解析SCSS里的@import语句，根源出在你的webpack配置里的两个小疏漏：

问题1：SCSS文件的匹配路径写错了 #

看你的webpack.config.js里，处理.scss的规则中，include指向的是src/sass目录，但你的SCSS文件明明放在src/scss目录下！这就导致webpack的sass-loader根本没匹配到你的main.scss文件，自然没法识别@import语法。

问题2：Style-loader和MiniCssExtractPlugin.loader冲突 #

这两个loader不能同时使用：

• style-loader是把编译后的CSS注入到页面的<style>标签里，适合开发环境快速调试
• MiniCssExtractPlugin.loader是把CSS提取成单独的文件，适合生产环境优化加载
  同时使用会导致loader逻辑混乱，也会干扰SCSS的正常解析。

修复方案 #

步骤1：修正SCSS文件的匹配路径 #

把include的路径改成正确的src/scss，或者直接删掉include（让webpack匹配所有符合.scss规则的文件）：

{
  test: /\.scss$/,
  // 修正路径，或者直接去掉这行include
  include: [path.resolve(__dirname, 'src', 'scss')],
  // ...其他配置
}

步骤2：区分开发/生产环境的loader配置 #

我们可以通过webpack的mode环境变量来动态选择loader，避免冲突：
修改webpack.config.js里的scss规则：

{
  test: /\.scss$/,
  include: [path.resolve(__dirname, 'src', 'scss')],
  use: [
    // 开发环境用style-loader，生产环境用MiniCssExtractPlugin.loader
    process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader'
  ]
}

完整修改后的webpack.config.js #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      },
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'scss')],
        use: [
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist', {}),
    new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};

额外小提示 #

如果后续项目复杂度提升，你可以把webpack配置拆分成webpack.dev.js和webpack.prod.js，分别管理开发和生产环境的配置，会更清晰。

现在重新运行npm run dev，应该就能正常编译SCSS文件了！

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