function applyCssLoaders()

in packages/plugin-sass/src/index.ts [27:102]

• 62 lines of code
• 5 McCabe index (conditional complexity)

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

  const disableExtractText = typeof options.disableExtractText === 'boolean'
    ? options.disableExtractText
    : getEnv().isDev();

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

  if (exclude) {
    rule.exclude.add(exclude);
  }

  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({
      postcssOptions: {
        plugins: [
          autoprefixer({
            // @ts-ignore
            overrideBrowserslist: [
              '> 0%',
              'not ie <= 9',
            ],
          }),
          ...postCssPlugins,
        ]
      }
    });

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