如何用mini-css-extract-plugin合并SCSS生成的CSS与第三方导入CSS？

我看了你的配置和问题，核心问题出在两个地方：loader的冲突配置和splitChunks缓存组的优先级/规则设置，下面一步步给你修正：

1. 移除SCSS规则中冲突的style-loader #

你的SCSS loader规则里同时用了style-loader和MiniCssExtractPlugin.loader，这两个是互斥的：

• style-loader是把CSS注入到页面的<style>标签里
• MiniCssExtractPlugin.loader是把CSS提取到独立文件中

同时使用会导致不可预期的打包结果，所以必须删掉style-loader，SCSS的loader规则应该改成：

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader, // 只保留这个提取loader
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        config: { path: 'postcss.config.js' }
      },
    },
    'sass-loader',
  ],
},

2. 调整splitChunks缓存组，让所有CSS都归到styles组 #

你的splitChunks里，vendors缓存组会匹配node_modules里的所有模块（包括nouislider的CSS），导致第三方CSS被打包到vendors.css。我们需要：

• 给styles缓存组设置更高的priority（优先级），确保它先匹配CSS文件
• 修改vendors缓存组，排除.css和.scss文件，避免把CSS拆分到vendors chunk里

修改后的optimization.splitChunks配置如下：

optimization: {
  splitChunks: {
    cacheGroups: {
      default: false,
      // 优先处理所有CSS/SCSS文件
      styles: {
        name: 'styles',
        test: /\.s?css$/,
        minChunks: 1,
        reuseExistingChunk: true,
        enforce: true,
        priority: 10, // 设置更高优先级，比vendors组先匹配
      },
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        // 排除CSS文件，让它们归到styles组
        exclude: /\.s?css$/,
        // minChunks: 2, 可以根据需要开启
      },
    },
  },
},

3. 验证打包结果 #

修改完配置后，重新执行Webpack打包：

• 你自定义的style.scss会被打包到styles.[chunkhash].css
• 脚本中引入的nouislider.css也会被合并到同一个styles.[chunkhash].css文件里

完整的修正后配置示例 #

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

module.exports = {
  devtool: 'source-map',
  entry: {
    style: './resources/assets/sass/style.scss',
    // 你的其他入口文件...
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
          priority: 10,
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          exclude: /\.s?css$/,
          // minChunks: 2,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              config: { path: 'postcss.config.js' }
            },
          },
          'sass-loader',
        ],
      },
      // 你的其他loader规则（比如JS处理）...
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
    }),
    new webpack.ProvidePlugin({
      noUiSlider: 'nouislider',
    }),
  ]
};

这样就能实现把所有CSS（自定义SCSS编译后的+第三方库的）合并到单一的styles.[chunkhash].css文件里，方便你在PHP视图中手动引入啦。

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