Webpack 正在导入其他包的 CSS答案

【问题标题】：Webpack is importing CSS of other bundlesWebpack 正在导入其他包的 CSS
【发布时间】：2021-03-24 00:02:16
【问题描述】：

我有一个 Webpack 设置来构建不同的包，并将包使用的所有 CSS 放在一个 CSS 文件中。

问题在于 Webpack 将所有捆绑包的所有 CSS 放在一起。

小米项目配置如下。

webpack.config.js

module.exports = {
  entry: {
    'bundle-a': './src/bundle-a.ts',
    'bundle-b': './src/bundle-b.ts'
  },
  ...
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        include: path.resolve(__dirname, 'src'),
        use: ['ts-loader']
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: 'local'
            }
          }
        ]
      }
    ]
  }
};

src/bundle-a.ts

import style from './bundle-a.css';

...

src/bundle-a.css

.class-bundle-a {
  ...
}

src/bundle-b.js

import style from './bundle-b.css';

...

src/bundle-b.css

.class-bundle-b {
  ...
}

当我构建项目时，我得到以下 CSS 文件。

dist/bundle-a.css

.class-bundle-a {
  ...
}

.class-bundle-b {
  ...
}

dist/bundle-b.css

.class-bundle-a {
  ...
}

.class-bundle-b {
  ...
}

我希望 dist/bundle-a.css 仅在 src/bundle-a.ts 中导入 CSS，但我也得到了 src/bundle-b.ts 导入的 CSS，并且与 src/bundle-b.css 相同。如果我使用 style-loader，也会发生同样的情况。

我想知道这是预期的行为还是我的代码中有一些错误。

【问题讨论】：

你的 webpack 版本是多少？尝试用extract-text-webpack-plugin提取css
我的 webpack 版本是5.10.1。
你能通过 git 分享项目（所有设置）吗？

标签： css webpack css-loader webpack-style-loader mini-css-extract-plugin

【解决方案1】：

您也可以尝试将postcss 加载程序与cssnano 一起使用。

这样做的目的是优化您的 css 文件导入。

其中一个 cssnano 优化是丢弃重复的 cssnano#discardDuplicates

你可以尝试在你的 webpack.config.js 中这样使用：

...
rules: [
  ...
  {
    test: /\.css$/i,
    exclude: /node_modules/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: path.resolve(__dirname, '../dist/css/')
        }
      },
      {
        loader: 'css-loader',
        options: {importLoaders: 1},
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            config: path.resolve(__dirname, 'postcss.config.js'),
          },
        },
      },
    ],
  },
  ...

并为您的 postcss ( postcss.config.js ) 创建一个文件，如下所示：

module.exports = {
  plugins: {
    'cssnano': {
      autoprefixer: { add: true },
      discardComments: { removeAll: true },
      discardDuplicates: true,
      discardEmpty: true,
      discardOverridden: true,
      discardUnused: true,
      reduceIdents: false,
      reduceInitial: false,
      reduceTransforms: false,
      zindex: false
    }
  }
}

【讨论】：

【解决方案2】：

您可以添加附加规则。这有点多余，但对我有用：

module.exports = {
    entry: {
        'bundle-a': './src/bundle-a.ts',
        'bundle-b': './src/bundle-b.ts'
    },
    // ...
    module: {
        rules: [
            // ...
            {
                test: /bundle-a\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /bundle-b\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            // ..
        ]
    },
    optimization: { 
        // ...
    },
    plugins: [
        // ...
    ]
};

【讨论】：