问题标签 [mini-css-extract-plugin]

我将如何mode在我的webpack.config.js配置文件中查询？

这就是我想做的。mode我的webpack 配置中有设置：

当我初始化mini-css-extract-plugin我想检查的值mode：

显然那是行不通的。如何mode在该插件初始化中查询？

我正在使用 mini-css-extract-plugin 提取我的应用程序的 css。它确实有效，因为它正确地提取和拆分了我导入的组件的 css。它还提取到“main.css”，其中是来自未动态导入的模块的样式。

然而，最后一个文件 main.css 并未加载到我的应用程序中。我是否需要使用 ? 手动加载此文件<link>？

网络包：4.12.0

迷你 CSS 提取插件：0.4.0

我的配置：

我试图让 Webpack-4 splitChunks 优化来做到这一点：

1. 将所有 JS 和 CSS 放在任何入口点，但不止一次使用到公共文件（CSS 和 JS）中。
2. 将 MiniCssExtractPlugin 从 Vue 组件生成的所有 CSS 合并到同一个通用 CSS 文件中。

我有这个工作（如下），但第二个“extractedStuff”规则的效果是将所有入口点代码也放入共享块中，这就是我试图用那个“测试”来阻止的。“入口点”文件只是 webpack 存根，所有内容都在公共文件中，即使它只使用一次。它有效，但并不优雅。

有谁知道如何从第二条规则中排除入口点，还是有更好的方法来做到这一点？

有谁知道那些“模块，块”对象的定义在哪里，因为也许我可以通过某种方式更好地进行测试。

},

我已经构建了一个示例最小演示存储库： https ://github.com/fvigotti/webpack-errordemo

问题是当我添加这个（

进入 cacheGroups ，在编译过程中不会记录任何错误，输出 html 是通过导入生成的（除了 css ），并且 css 和 javascript 在编译后的输出中不再起作用..

我使用了官方自述页面中的代码......这是我的问题吗？也许这个库可以改进为在错误记录中更加详细？

谢谢你，弗朗切斯科

我还在mini-css-extract-plugin https://github.com/webpack-contrib/mini-css-extract-plugin/issues/180中打开了一个错误， 但我不能 100% 确定这是该插件的错误或配置错误。 . （这是一个非常简单的示例，我正在按照指南进行操作）

如果有人表明这不是此插件的错误，我将关闭该问题

当我使用extract-text-webpack-plugin时，提取的单个 CSS 文件会index.html在创建生产构建时附加到我的。但是，我刚刚切换到mini-css-extract-plugin，当我为生产构建时，提取的单个 CSS 文件没有附加到我的index.html.

这是由产生的输出extract-text-webpack-plugin

并注意我使用时的输出mini-css-extract-plugin，它没有附加样式表

这是mini-css-extract-plugin配置

我是否需要添加一些其他配置才能将提取的 CSS 文件附加到index.html？也许一个额外的配置html-webpack-plugin？

使用 webpack 2（或 3）时，我可以编写如下代码：

结果，我在输出中得到了 2 个 css 文件。

我怎样才能达到同样的效果mini-css-extract-plugin？根据文档，我只能指定一个文件名：

谢谢。

我正在使用 MiniCssExtractPlugin 在我的反应应用程序中延迟加载 css 文件。

我已经为 MiniCssExtractPlugin 提供了 publicPath 选项，但它没有采用此选项值，而是采用 output.publicPath 选项。

有什么帮助？？？

我正在尝试设置一个 uitkit 模板

• 网络包 4
• 萨斯装载机
• MiniCssExtract插件
• uikit

我想要实现的是构建自动将 sass 转换为 css，并将生成的 css 注入到 src/index.html 中。

webpack.config.js

index.js

不幸的是，构建失败了

如果有人能解释我做错了什么以及为什么 sass loader 找不到变量 $inverse-global-color，我将不胜感激。

介绍

我已经webpack在我的项目中为我的 Javascript 文件设置了捆绑。现在我正在将 CSS 文件添加到webpack配置中。到目前为止，我一直在通过<link>为我依赖的每个 CSS 文件（例如引导程序、我自己的 css 等）添加元素来手动将 CSS 文件包含在 HTML 标题中。显然这不是很优雅，使用webpack会更好，所以我想替换链接元素并通过webpack.

这应该很容易，一切都在 webpack 文档中记录。在阅读了文档并进行了一些试验后，webpack我已经得出了下面已经可以使用的配置。

问题

我当前设置的问题是我希望有适当的源映射支持，但这似乎不起作用。正确地说，我的意思是我希望当我运行开发构建webpack并检查 Chrome DevTools 中的某些元素时，我会看到某个 CSS 类源自哪个文件和文件中的哪一行，并且我可以单击CSS 规则和浏览器跳转到该文件。

我不想在 head 元素中有内联样式，因为那样浏览器会显示类似的东西.foobar { <style>..</style>，而不是.foobar { app.css:154.

使用我当前的设置，我将所有 CSS 文件合并（但未缩小）到一个app.css文件中。这意味着如果我检查一个引导类，例如.btn然后它显示为.btn { app.css:3003. 但是，我想要实现的是浏览器将其显示为.btn { bootstrap.css:3003.

所以现在我试图了解如何webpack和不同的插件，例如css-loader和min-css-extract-plugin应用 CSS 源映射，以及如何配置它们以实现适当的调试体验。

我不确定这有多相关，但是当我在 Sources 下的 DevTools 中导航时，webpack://./bootstrap/dist/css/bootstrap.css我看到它只包含一行： // extracted by mini-css-extract-plugin.

Webpack 设置

index.js：

webpack.config.js：

结论

看来我刚刚通过了橡皮鸭测试。在我写这篇文章时，我找到了一个解决方案。我仍然会发布这个问题，也许它可以帮助其他人。

这是重现错误的存储库：https ://github.com/sandrocsimas/webpack-bug

我正在使用webpack 4.16.1和mini-css-extract-plugin 0.4.1。

当我在生产模式下运行 Webpack 时，只会生成 vendor.css 包。开发模式同时生成 main.css 和 vendor.css。这是我的 Webpack 配置：

我还评论了以下几行以查找导致此问题的插件，但问题仍然存在。

我认为问题在于这一行：

问题可能出在上面的行中，与 css extract 插件一起使用。

我该如何解决这个问题？

更新：

我不知道这是否重要，但这里是 Webpack 执行日志：

Main.less 出现在这里：

在 dist 文件夹中搜索706结果如下：

查看使用 --stats 生成的 json，我发现：

似乎 css 是由 提取的mini-css-extract-plugin，但捆绑包没有保存。=(