sass-loader报'at-rule is not allowed'错误问题排查求助

1. 修正css-loader的importLoaders参数 #

当前配置中css-loader的importLoaders设置为1不符合实际loader链结构，该参数代表css-loader处理@import资源前，需要调用的前置loader数量。
loader的执行顺序为从后往前：sass-loader -> resolve-url-loader -> css-loader -> style-loader，所以css-loader前共有2个前置loader，需要将参数调整为2，否则@import引入的scss文件不会被sass-loader处理，直接以css规则解析就会识别不了sass的@规则。
修改后的配置片段：

{
  loader: 'css-loader',
  options: {
    importLoaders: 2,
  },
}

2. 配置sass-loader路径解析规则 #

引入node_modules内的scss资源时，建议新增includePaths配置简化路径解析逻辑，避免相对路径层级错误导致的加载异常：

// 注意先引入node内置path模块
const path = require('path')

// sass-loader配置修改为
{
  loader: 'sass-loader',
  options: {
    implementation: require.resolve('sass'),
    sassOptions: {
      indentWidth: 4,
      includePaths: [path.resolve(__dirname, 'node_modules')]
    },
  },
}

3. 检查scss语法兼容性 #

dart-sass语法规则比旧版node-sass更严格，明确禁止在嵌套规则块内部使用@import。你可以打开报错指向的第64行对应的scss文件，检查该行@import是否被写在某个{}内部，如果是需要将@import移动到文件顶层，或者改用dart-sass推荐的@use模块化导入规则替换@import。

4. 排查全局注入配置问题 #

如果你配置了sass-loader的additionalData参数用来全局注入公共变量、样式文件，需要检查注入的代码末尾是否正确添加了分号，避免注入代码和业务代码拼接后，导致@import被错误嵌入规则块内。

5. 区分css module与普通scss配置 #

如果项目同时使用了css module和全局scss，需要分开配置loader规则，避免全局scss（尤其是node_modules内的第三方样式）被当成css module处理导致解析错误：

// 处理普通全局scss，排除.module.scss文件
{
  test: /\.s[ac]ss$/i,
  exclude: /\.module\.s[ac]ss$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
      }
    },
    'resolve-url-loader',
    'sass-loader'
  ]
},
// 处理css module的scss文件
{
  test: /\.module\.s[ac]ss$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        modules: true
      }
    },
    'resolve-url-loader',
    'sass-loader'
  ]
}

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