function applyCssLoaders()

in packages/plugin-webpack5-sass/src/index.ts [24:88]

• 53 lines of code
• 3 McCabe index (conditional complexity)

function applyCssLoaders(rule: Chain.Rule, options: BreezrStyleOptions) {
  const {
    disableExtractText,
    loader,
    loaderOptions,
    modules = false,
    sourceMap = false,
  } = options;

  // extract-text-webpack-plugin 在 webpack 4 中用作提取 css 的时候存在问题
  // 使用 mini-css-extract-plugin 作为更好的代替方案进行 css 的抽取
  const styleLoaderOptions = {};

  if (!disableExtractText) {
    rule
      .use('extract-css-loader')
      .loader(require('mini-css-extract-plugin').loader)
      .options({
        ...styleLoaderOptions,
        publicPath: './',
      });
  } else {
    rule
      .use('style-loader')
      .loader(require.resolve('style-loader'))
      .options(styleLoaderOptions);
  }

  const cssOptions = {
    sourceMap,
    importLoaders: 2,
    modules,
  };

  // css loader
  rule
    .use('css-loader')
    .loader('css-loader')
    .options(cssOptions);

  // postcss loader
  rule
    .use('postcss-loader')
    .loader('postcss-loader')
    .options({
      ident: 'postcss',
      plugins: () => [
        autoprefixer({
          // @ts-ignore
          overrideBrowserslist: [
            '> 0%',
            'not ie <= 9',
          ],
        }),
      ],
    });

  // style loader, eg: less, scss
  if (loader) {
    rule
      .use(loader)
      .loader(loader)
      .options(loaderOptions);
  }
}