css - Webpack 正在导入其他包的 CSS

Question

我有一个 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只有在 .cs 中导入了 CSS src/bundle-a.ts，但我也得到了src/bundle-b.ts由src/bundle-b.css. 如果我使用style-loader也会发生同样的情况。

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

标签： csswebpackcss-loaderwebpack-style-loadermini-css-extract-plugin

Answer 1

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

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: [
        // ...
    ]
};