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

Question

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

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问题就消失了。