webpack - 对 .scss 和 .less 文件使用不同的加载器

Question

我正在使用 Webpack 3 和 CSS 模块。我有一个用于“.local.css”和“local.scss”文件（本地文件）的不同加载程序，以及用于我的全局“.css 或 .less”文件的另一组加载程序。

现在我多了一个文件类型，一个全局的“.scss”文件。我不想为 .scss 文件制作另一组加载器，因为加载器与用于全局“.css 和 .less”文件的加载器相同。

只有一个区别，如果文件是“.less”，我将使用less loader它，如果它是“.scss”，那么我将使用sass loader.

{
        test: /\.local\.(css|scss)$/,
        use: ExtractLocal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]___[name]__[hash:base64:5]',
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-resources-loader',
              options: {
                resources: [ path.resolve(__dirname, './src/client/styling/styles/variables.scss'), ],
              },
            },
          ],
        }),
      },
      {
        test: /^((?!\.local).)+\.(css|less)$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'less-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        }),
      },

我该怎么做呢？例如，我可以以某种方式检查文件类型并使用适当的加载器吗？

{
        test: /^((?!\.local).)+\.(css|less|scss)$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },

            if(test === '.less') {

              loader: 'less-loader',
              options: {
                sourceMap: true,
              },
             } else {
               loader: 'sass-loader',
               options: {
                sourceMap: true,
              },
             }

          ],
        }),
      },

我知道我的例子没有意义，只是想证明我的目标。

标签： webpackloadersass-loaderless-loader