Что такое опция importLoaders в css-loader в Webpack 4?

Question

Я начал изучать Webpack 4 с месяца.Большинство вещей, которые я хотел сделать, работает отлично, но эта опция importLoaders из css-loader все еще остается для меня загадкой.Его официальная документация плохая, и я не нашел каких-либо хорошо объясненных записей об этом.

Мой пример использования очень близок к описанному в документации:

{
  test: /\.s?css$/,
  use: [
    ExtractCssChunks.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
        import: true, // is true by default, but should I use instead false here???
        url: false // let postcss do it
      }
    },
    'postcss-loader',
    'sass-loader'
  ]
}

И мой vendors.scss, например, с различными типами импорта:

@charset 'UTF-8';

// Google fonts
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Dosis:200,400,500,600');

//FontAwesome (from node_modules)
@import "~@fortawesome/fontawesome-svg-core/styles";

// Site theme
@import "theme/index";

В основном я хочу, чтобы sass-loader выполнял свою обычную работу и postcss выполнял некоторые манипуляции с файлами изображений.

Так когда и почему я должен использовать 0/1/2 / n для опции importLoaders?
Как это повлияет на мой @imports выше?

Может кто-нибудь объяснить мне более подробно, как в документах?
Заранее спасибо.

Answer 1

После дополнительных поисков выяснилось, что я не единственный, кто запутался в том, как правильно использовать эту опцию.Проблемы из репозитория GitHub css-loader:

https://github.com/webpack-contrib/css-loader/issues/765

Также смотрите @guidobouman отличное объяснение здесь:
https://github.com/webpack-contrib/css-loader/issues/228#issuecomment-312885975

Так что это отвечает на мой вопрос(цитируется буквально):

importLoaders влияет только на неразрешенные @import s.Поэтому при использовании postCSS с nextCSS (без распознавателя @import) вам нужно установить importLoaders.Таким образом, nextCSS также будет применяться к импортированным .css файлам.Но при использовании sass он уже обрабатывает операторы @import, поэтому importLoaders не требуется.

Таким образом, это происходит только тогда, когда css-loader находит нерешенное @import.Например, при использовании sass-loader;Весь импорт разрешается (и объединяется) до того, как css-loader даже получит возможность искать @import.