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

Question

I'm using [email protected] and [email protected] with dart-sass. My project uses scss-files from node_modules. When I build the project, webpack gives me a bunch of errors looking like

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

Here is my rule config for sass files:

{
   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,
          },
         },
      },          
   ],
},

My assumption is that sass-loader merges the scss-files altogether and after that it can't properly import dependencies. I tried to replace style-loader with { loader: MiniCssExtractPlugin.loader },, but it doesn't really change a thing.

Answer 1

I solved the issue simply replacing sass (which previously used to be dart-sass) by node-sass and the problem is gone.