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 文件，之后它无法正确导入依赖项。我尝试用 { loader: MiniCssExtractPlugin.loader }, 替换 style-loader，但它并没有真正改变任何东西。

Answer 1

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

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

sass-loader gives 'at-rule is not allowed' errors

webpack

sass

sass-loader

dart-sass