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

我在我的打字稿和 webpack 项目中使用 MiniCssExtractPlugin。

我的 MiniCssExtractPlugin 的 webpack 配置看起来像

现在我项目中的 scss 文件有这个片段

当我的应用程序运行时，npm start我可以看到标题 H1 有一个颜色的下划线880055。所以这意味着我的 scss 文件被正确读取。

如果我进入 chrome 开发人员工具并进入网络选项卡并查找 CSS。我可以看到正在下载 foo.css。如果我查看 foo.css 的内容

它没有我的“已完成”课程。相反，我看到类似

所以像 h1 这样的元素类是好的，但是其他的都是乱码。这是怎么回事？

我在删除 webpack 4 中未使用的 CSS 时遇到问题。似乎大多数 CSS 净化插件都依赖于未针对版本 4 更新的提取文本插件。

这是我的命令：

node_modules/.bin/webpack --mode=development --env.operation=separateCSS

或者

node_modules/.bin/webpack --mode=development --env.operation=bundleCSS

这是我的 webpack.config.js 的一部分：

有谁知道如何修改我的配置文件以便 webpack 可以删除未使用的 CSS？

我正在使用Webpack 4和mini-css-extract-plugin在一个 php 应用程序中。我将css我编写的所有样式保存在scss文件中，但在某些情况下，当我导入外部库时，我会在我使用它的脚本中导入它的 css。我的最终目标是将所有 css 样式放在一个 css 文件中，我可以手动将其包含在 php 视图中，但目前我在一个文件中获取 scss，而在另一个文件中获取库中的 css。

我当前的 webpack 配置是这样的：

scss样式工作正常，但是在一个脚本中我有这个：

它来自一个包含的脚本ProvidePlugin，这个 css 最终在vendors.css文件中，而我希望它style.css与其余的一起。

我究竟做错了什么？

编辑：按照建议，我创建了一个 github 存储库来重新创建问题：

https://github.com/carlotrimarchi/webpack-test

我想加载本地 3rd 方 css（例如字体真棒图标）作为我的样式指南的一部分。由于许多组件使用相同的 CSS，我希望它能够自动加载并作为静态构建的一部分包含在内。

我决定使用 mini-css-extract-plugin 来完成这项工作，但 styleguidist 维护者 @sapegin 基本上告诉我，我不知道自己在做什么，并且在不提供任何帮助的情况下停止向他抱怨。所以我希望 stack-overflow 社区能帮我指出正确的方法：

styleguidist 讨论：https ://github.com/styleguidist/react-styleguidist/pull/985#issuecomment-389422909

我的 github 存储库演示了三种方法： https ://github.com/bugzpodder/styleguidist-local-css-example/tree/master

master：使用 mini-css-extract-plugin + 需要配置，构建和 devserver 按预期工作。

要求：没有 mini-css-extract-plugin 我无法让它工作

模板：devserver 有效，但 build 无效。我能想到的唯一解决方法是使用 publicPath 并在那里复制 css，但 publicPath 是不允许的，除非你危险地更新webpackconfig https://github.com/styleguidist/react-styleguidist/pull/956

我已经为我的 VueJS 项目创建了 webpack 配置。我想将样式与 javascript 代码分开。我使用了 mini-css-extract-plugin 但最后我只收到了 bundle.js 文件。这个配置有什么问题，哪里有错误？有没有丢失的装载机。我的配置如下：

我的文件 package.json

我正在尝试生成供应商 CSS 和 Javascript，但出现了问题。供应商 Css 包含在 Css 和 Javascript 包中。

这是我的 webpack 配置：

这是 vendor.ts 条目：

这导致 vendor.css 包含 bootstrap.min.css，但 bootstra.min.css 也包含在 vendor.js 中。我怎么能把这个分开？

我在一个项目中使用 Webpack 4，到目前为止我只需要编译和捆绑样式。没有Javascript。

这是我的配置：

问题是它输出了两个文件：bundle.css 和 bundle.js。有没有办法配置 Webpack 使其不输出 Javascript 包？我尝试浏览文档，尝试了十几种不同的方法，但并没有真正奏效。

这里的一个重要注意事项是，如果我删除 css-loader，捆绑会失败。因此，虽然 css-loader 最有可能负责输出 bundle.js 文件，但我并不完全确定如何避免使用它。

我在 dist/css 下遇到了重复 css 文件的问题

我的 webpack 配置如下：

webpack.base.config.js

和 webpack.prod.config.js

我检查了两个文件的内容，其中一个是由 OptimizeCSSAssetsPlugin 压缩的，另一个不是。

我还想问一下为什么这个 css 块没有 brotli 和 gziped 版本。

谢谢

我有以下 webpack 配置：

规则：

插件：

在构建和观察输出时，SpeedMeasurePlugin我得到这样的输出：

为什么 sass 会编译两次？

在我当前的设置中，webpack 将在 .js 文件中导入的 css 捆绑到单独的样式文件中，并在 .js 包完成加载后加载它。因为 .js 包是在 html（/body 标记的结尾）之后加载的，所以页面最初没有样式。

当前的 webpack 设置：

理想情况下，我希望在 html 标头中添加一个单独的标签，其中将加载捆绑的 css 文件。我在 HtmlWebpackPlugin 选项和 MiniCssExtractPlugin 选项中都没有找到这样的选项。你知道如何做到这一点的好方法吗？