webpack - Webpack 和 MiniCssExtractPlugin 不捆绑 CSS 文件

Question

我的配置与那里所说的完全相同。我的目标是生成一个 CSS 文件，它是位于src/css/文件夹中的多个 CSS 文件的捆绑包。

当我运行构建时，我没有在dist/文件夹中收到任何 CSS 文件。

我想我错过了如何将 CSS 文件实际包含到构建中。这些 CSS 文件在我的代码中的任何地方都没有引用，它们是由<link>在文档中附加标签的 JavaScript 动态注入的。

当我的代码中没有明确引用 CSS 文件时，如何让 webpack 拾取和捆绑 CSS 文件？

score 1 · Accepted Answer

我发现了这一点——文档中的任何地方都没有提到这种语法。

您可以在任何 JavaScript 文件中提及 CSS 文件，然后 MiniCssExtractPlugin 会提取它。例子：

import './css/button.css';
import './css/chat.css';

score 0 · Accepted Answer

@user6269864 它引用了 mini-css-extract-plugin 中描述的第二句：

它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。

为了在 Js 文件中包含 CSS，webpack 通过如下基本配置提供导入：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

上面的配置在他们的文档中，其中还包括如何导入：import css from 'file.css'; Webpack css-loader

2 回答 2