Webpack 3：全局样式文件复用Loader并自动匹配预处理器Loader

我懂你的需求——不想为全局SCSS单独写一套几乎重复的Loader配置，只想根据文件后缀自动切换less-loader和sass-loader对吧？由于你使用的是Webpack 3，它没有Webpack 4+的oneOf特性，我们可以通过提取公共Loader配置的方式实现，既避免代码重复，又精准满足需求。

具体实现思路 #

1. 先把全局样式共用的Loader（css-loader、postcss-loader）抽成独立变量，让所有全局规则复用这部分配置；
2. 针对全局的.css、.less、.scss分别编写规则，在公共Loader的基础上，按需追加对应的预处理器Loader即可。

完整配置示例 #

const path = require('path');
// 假设你已定义ExtractLocal和ExtractGlobal
// const ExtractLocal = ...;
// const ExtractGlobal = ...;

// 提取全局样式的公共Loader配置
const globalCommonLoaders = [
  {
    loader: 'css-loader',
    options: {
      sourceMap: true,
      minimize: true,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: true,
    },
  },
];

module.exports = {
  // ...其他Webpack配置（入口、输出等）
  module: {
    rules: [
      // 本地样式文件规则（保持原配置不变）
      {
        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'),
                ],
              },
            },
          ],
        }),
      },
      // 全局.css文件：仅使用公共Loader
      {
        test: /^((?!\.local).)+\.css$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: globalCommonLoaders,
        }),
      },
      // 全局.less文件：公共Loader + less-loader
      {
        test: /^((?!\.local).)+\.less$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [...globalCommonLoaders, {
            loader: 'less-loader',
            options: {
              sourceMap: true,
            },
          }],
        }),
      },
      // 全局.scss文件：公共Loader + sass-loader
      {
        test: /^((?!\.local).)+\.scss$/,
        use: ExtractGlobal.extract({
          fallback: 'style-loader?sourceMap',
          use: [...globalCommonLoaders, {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          }],
        }),
      },
    ],
  },
};

方案说明 #

Webpack 3没有oneOf语法（该特性在Webpack 4才引入），无法在单个规则内根据文件后缀分支选择Loader。通过提取公共配置，我们既避免了重复编写相同的Loader代码，又能清晰地为不同后缀的文件匹配对应的预处理器Loader，完全贴合你的需求。

内容的提问来源于stack exchange，提问作者Igor-Vuk