Question

我尝试在此处遵循手册：https://webpack.js.org/plugins/mini-css-extract-plugin/

我的配置与此处所述完全相同。我的目标是产生一个CSS文件，该文件是位于[NSMutableDictionary dictionary]文件夹中的多个CSS文件的组合。

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

我认为我缺少将CSS文件实际包含到构建中的方法。这些CSS文件未在我的代码中引用，而是由JavaScript动态注入的，这些JavaScript在文档中附加了dist/标签。

当我的代码中未明确引用CSS包时，如何指向webpack拾取并捆绑CSS文件？

Answer 1

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

您可以在任何JavaScript文件中提及CSS文件，然后MiniCssExtractPlugin将其选中。示例：

curl -XPOST '{ES_ADDR}:{ES_PORT}/test/_update_by_query' -H 'Content-Type: application/json' -d '{
  "script": {
    "source": "ctx._source.title = params.title;",
    "params": {
      "title": "demo"
    }
  },
  "query": {
    "bool": {
      "must": [
        {
          "term": {
            "_id": "123"
          }
        }
      ]
    }
  }
}'

Answer 2

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

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

要将CSS包含在Js文件中，webpack通过以下基本配置提供导入：

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

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

Webpack和MiniCssExtractPlugin不捆绑CSS文件

2 个答案: