sass-loader 给出 'at-rule is not allowed' 错误

Question

我将webpack@5.58.1 和sass-loader@12.1.0 与dart-sass 一起使用。我的项目使用来自 node_modules 的 scss 文件。当我构建项目时，webpack 给了我一堆看起来像

的错误

SassError: This at-rule is not allowed here.
   ╷
64 │     @import "../../styles/_appwork/include";
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

这是我的 sass 文件规则配置：

{
   test: /\.s[ac]ss$/i,
   use: [
     { loader: 'style-loader' },
       {
         loader: 'css-loader',
         options: {
            importLoaders: 1,
        },
      },
      { loader: 'resolve-url-loader' },
      {
        loader: 'sass-loader',
        options: {
           // Prefer `dart-sass`
          implementation: require.resolve('sass'),
          sassOptions: {
             indentWidth: 4,
          },
         },
      },          
   ],
},

我的假设是 sass-loader 完全合并了 scss 文件，之后它无法正确导入依赖项。我尝试将 style-loader 替换为 { loader: MiniCssExtractPlugin.loader },，但这并没有真正改变任何事情。

Answer 1

我解决了这个问题，只需将sass（以前是dart-sass）替换为node-sass，问题就消失了。