Webpack同时编译LESS与SCSS时，Extract Text Plugin无法提取common.bundle.js中CSS

Hey there! Let's tackle this tricky CSS extraction issue you're dealing with—having both LESS and SCSS in your transition project, and getting stuck on pulling CSS out of your common.bundle.js while other chunks work fine. Since you're sticking with your current Webpack version, let's focus on targeted fixes without major updates.

1. Verify Loader Order & Rule Coverage #

First off, make sure your loader rules for both preprocessors are correctly ordered and cover all relevant files. Remember, Webpack runs loaders right-to-left, so the style extraction loader needs to be first in the use array.

Here's a solid rule setup to cover both LESS and SCSS:

module.exports = {
  // ... other config
  module: {
    rules: [
      // Handle LESS files
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader, // Extract to separate CSS file first
          'css-loader', // Resolve @import and url() in CSS
          'less-loader' // Compile LESS to CSS
        ],
        // Double-check you're not excluding any files that are part of the common chunk!
        exclude: /node_modules/ // Adjust if needed
      },
      // Handle SCSS files
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader' // Compile SCSS to CSS
        ],
        exclude: /node_modules/
      },
      // Your JS/TS loader rules here...
    ]
  }
};

Common mistake: If your original LESS rule had an include that's too restrictive, it might be missing styles in the common chunk. Make sure the rules apply to all style files across your project that need extraction.

2. Ensure MiniCssExtractPlugin is Configured for Chunks #

Next, check your MiniCssExtractPlugin setup to ensure it's generating files for both initial and async chunks—including the common chunk.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ... other config
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css', // For initial chunks (like common)
      chunkFilename: '[name].css' // For async chunks—adjust naming as needed
    })
  ]
};

Without setting chunkFilename, some chunks (like common) might not get their CSS extracted properly.

3. Validate SplitChunks Configuration #

Since your common.bundle.js is being generated, let's make sure the splitChunks setup isn't preventing CSS extraction. The key is to ensure style modules are included in the common chunk and that Webpack knows to extract their CSS.

module.exports = {
  // ... other config
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        common: {
          name: 'common',
          chunks: 'initial',
          minChunks: 2, // Adjust based on your needs
          // Make sure this doesn't exclude style files!
          test: /[\\/]src[\\/]/, // Or a broader test if needed
          priority: 10
        },
        vendors: {
          // Your vendor chunk config here...
        }
      }
    }
  }
};

Pro tip: If your common cache group has a test that only matches JS files, it might be pulling in style dependencies but not flagging them for CSS extraction. Loosen the test to include your source files broadly.

4. Check for Conflicting Plugins or Loaders #

If you're still stuck, double-check for any old plugins (like extract-text-webpack-plugin) that might be conflicting with MiniCssExtractPlugin. Since you're transitioning from LESS, make sure you've fully replaced any old extraction plugins with MiniCssExtractPlugin—mixing them can cause unexpected behavior.

Also, ensure you're not using style-loader anywhere in your production config (it injects CSS into the DOM instead of extracting it). The MiniCssExtractPlugin.loader should replace style-loader for extraction builds.

Final Checks #

• Run Webpack with the --stats detailed flag to inspect how modules are being processed. Look for style files in the common chunk—do they show up as being processed by the correct loaders?
• Clear your Webpack cache (delete node_modules/.cache or use --no-cache flag) to rule out stale build artifacts.

Hope these steps get your common chunk CSS extracted properly!

内容的提问来源于stack exchange，提问作者Kerry7777