Блог

Я использую webpack@5.58.1 и sass-loader@12.1.0 с dart-sass помощью . В моем проекте используются scss-файлы из node_modules. Когда я создаю проект, 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-загрузчик полностью объединяет scss-файлы, и после этого он не может правильно импортировать зависимости. Я попытался заменить загрузчик стилей на { loader: MiniCssExtractPlugin.loader }, , но на самом деле это ничего не меняет.

Я решил проблему, просто заменив sass (что раньше было dart-sass ), node-sass и проблема исчезла.