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

我尝试了 extract-text-webpack-plugin 来提取 css 文件，但它失败了。webpack 的版本是 4.16.3，所以我使用 mini-css-extract-plugin 来做，也失败了！我认为这与这些插件的配置无关。有我的 webpack 配置。代码仓库在这里。成功打包，但没有css文件。

我的应用程序中的样式具有以下结构：

应用

现在我需要从导入到条目 bootstrap.js 和 common.js 的样式中创建单独的 CSS-es。

webpack.config.js

包.json

当我运行 webpack 时，出现以下错误：

你知道有什么问题吗？在导入其他较少的文件期间似乎bootstrap.less引发了错误，但我不知道为什么。

谢谢

拉法尔

PS：这里报告了类似的问题。

在命名使用 MiniCssExtractPlugin 生成的 CSS 文件时，有两种不同的命名建议：

第一个例子：

第二个例子：

哪种方法是首选方法，为什么？

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

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

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

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

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

我已经阅读了关于 Webpack 4 将 .scss 文件捆绑到 .css 文件中的所有可能配置。

没有什么对我有用。

这是我的 webpack 配置：

这是我的 .scss 文件：

这是我的 package.json

这是我得到的错误

最重要的是，bundle.css 是一个 js 文件输出为 bundle.css

到目前为止我已经尝试过：

1. 使用样式加载器

2. 使用装载机的组合：

   使用：['sass-loader'，'style-loader'，'css-loader']

3. MiniCssExtract插件

4. 在节点 6.8.1 和 8.x 上尝试过

但我得到同样的错误。早些时候，由于加载程序的歧义，我曾经让模块构建失败；这得到了include关键解决。

自从 4 天以来，我一直在把头撞在墙上。咕噜声更容易。

您能否分享一个工作示例的链接。Github 线程只是人们胡说八道，没有任何工作示例。

当我尝试添加 sass-loader 并运行 webpack 时，dist 文件夹中有多个 chunck .css 文件，而不仅仅是名为“style.css”的捆绑文件。

我的 dist 输出文件夹如下所示：

我想这是因为 Mini-css-extract-plugin 但我不知道如何修复它。

这是我的 webpack 文件：

任何的想法 ？

到目前为止，我一直在使用extract-text-webpack-plugin和webpack 3制作两个捆绑文件。一种用于本地样式，一种用于全局样式。

因此，在全局样式文件中，我们将从 bootstrap、语义等中提取 css ……在本地样式包中，我们将放置我们自己的样式。

这两个文件都将具有contenthash，因此，例如，如果我在本地样式中更改某些内容并重新构建应用程序，则只有本地样式的哈希值会更改，而全局样式的哈希值不会更改。

更新到 webpack 4 后，需要使用 mini-css-extract-plugin 而不是 extract-text-webpack-plugin。

到目前为止，这是我的设置。我正在尝试不同的东西，但我不知道如何为 mini-css-extract-plugin 设置此设置？

块 AccessRights~Groups~Navigator [mini-css-extract-plugin] 中的警告：

• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Icon/_circle/Icon_circle.scss
• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Counter/Counter.scss
• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/NavigatorToolbar/NavigatorToolbar.scss

这是什么意思以及如何解决？先感谢您！

简短的摘要：

我注意到在本地测试时，我的 webpack 的 dev/prod 配置之间存在小的样式差异。它似乎与 sass-loader 有关，但它可能会扩展到此之外？我不能确定，因为很难找到这个错误。

（底部的代码，图像只是为了突出某些元素）

线索

大多数在开发中丢失或被覆盖的样式都来自我的 Sass 文件。因此，我认为罪魁祸首隐藏在我如何处理 prod.config.js 与 dev.config.js 上的 Sass 文件的某个地方。具体来说，我注意到像 $main-font 这样的 Sass 变量在 dev 上没有被解释，但在 prod 配置上似乎没问题。我还注意到一些奇怪的覆盖发生，其中 dev 可能从一组类应用了边框，但生产没有。也许 Minicssextract 正在为 prod 做一些不同的事情？

问题

在下图中，左边是我的生产配置。正如您所看到的，它将文本提取到在 index.html 中调用的 CSS 文件中。它可以很好地加载我的 SCSS 变量。在右边，我不使用 minicssextractloader，我所有的样式都被放入标签并注入。它将字体系列切换到我在代码中任何地方都没有定义的东西？

装载机

左边是 dev，右边是 Sass 的 prod。

下面是这个字体在 Sass 中是如何定义的：

想法和测试：

• Style-loader：我尝试从 scss 测试中删除 dev 上的 postcss、sass-loader 和 style-loader。似乎没有解决问题。
• webpack 是否有可能在开发/生产模式之间做一些时髦的事情？
• 也许我对 prod 的 css 压缩让事情变得很奇怪？

开发配置

产品配置

有些 Sass 似乎遇到了麻烦？

我对 express + webpack 比较陌生，所以我不清楚这是不是有意的，如果不是，如何正确配置它。问题在于使用 mini-css-extract-plugin 时创建的附加资产和入口点。

网络包配置：

webpack 输出

我的问题是，为什么demo_styles.js要创建？尽管正在提取 css，但似乎 webpack 仍在使用 css 创建捆绑的 js，但是当我查看该文件时，其中唯一的一行是

谁能帮忙解释这里发生了什么？

更新

如果我删除 demo_styles 入口点，并通过插件初始化对其进行配置，则不会构建任何 CSS 资产。

回购协议在这里（注意快递分支）https://github.com/brewster1134/bumper/tree/express