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

我使用Webpack 4.35.3来编译我的资产。

我有一个 application.js 文件，它是我的入口点：

我有一个 application.scss 文件，它是我导入 SCSS/CSS 文件的文件：

问题是 Webpack 在引导主题之前导入我的样式文件。而且我的样式文件不会覆盖引导程序。

如果可能的话，我不想在入口点导入 bootstrap.scss，因为我想使用变量来覆盖引导程序。

在这里，我的 SCSS 文件的 webpack 配置：

我正在尝试使用 .css 将 Webpack 样式提取到 .css 文件中mini-css-extract-plugin。我收到一条错误消息，指出它找不到模块。

./Common/Login/login.min.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：
错误：找不到模块'../../node_modules /css-loader/dist/runtime/api.js' 在 webpackMissingModule (C:@Code\node_modules\css-loader\dist\cjs.js!C:@Code\Common\Login\login.min.css:108: 92)

似乎模块位置是一个相对路径../../node_modules，如果它尝试从node_modules/css-loader/dist/cjs.js. 似乎应该如此../../../。

我不知道这些相对路径在哪里或为什么会这样，或者这是否是问题所在。以下是相关的 Webpack 配置选项：

知道为什么mini-css-extract-plugin会这样轰炸吗？如果我只使用style-loader，那么一切都会正确编译，但显然输出是 JavaScript 而不是可缓存的 CSS 样式表文件。

我想让 Webpack 生成的捆绑 .css 文件更具可配置性，这样我就可以输出不同的“版本”——基于同一个 .css 文件——让开发人员在未来从事我的项目的工作更加轻松。

我想有以下步骤：

1. 将所有 SCSS 合并为 CSS ( bundle.css )
2. 最小化步骤 1 的输出（bundle.min.css）
3. 嵌入第 2 步中的所有图像 ( bundle.b64.min.css )
4. 嵌入第 3 步中的所有字体（bundle.bs64.fonts.min.css）

最后 - 在我的构建过程之后 - 我的 dist 文件夹中有 4 个不同的文件。那我可能吗？

我目前的做法是，我为每个步骤运行不同的脚本 - 删除 dist 文件夹，遍历项目，生成输出。我希望有一个脚本可以一次完成所有操作，而不必通过我的项目 4 次。

我在这里找到了解决方案：

Webpack Extract-Text-Plugin 输出多个 CSS 文件（缩小和未缩小）

但是，对于我的具体情况，我必须在一个数组中返回 4 个不同的配置，而不是一个对象。

我们正在将 CSS-loader 从 v0.28.11 迁移到 v3.1.0

我们有2个项目：

• 项目 A- 对任何其他项目没有组件依赖 - （包含一些组件）
• 项目 B - 我们将项目 A 作为节点模块导入

我们能够成功运行和构建项目 A。但是当我们尝试运行项目 B 时，我们会收到来自项目 A 的 css 文件的依赖错误。

1. 如果我们将项目 A 的 css-loader 加载到 v3.1.0 并将项目 B 加载到 v1.0.0，同样可以正常工作
2. 但是如果我们将两个项目的 css-loader 版本都更改为 3.1.0，则会出现编译时错误

我们应该能够使用 3.1.0 版本的 CSS-loader 运行和创建构建

当我使用 MiniCssExtractPlugin 对我的项目进行 Webpack 以将 css 分离为文件时，它会创建 main.css 文件，但从不将链接写入我的 html 文件。

这是我的 webpack.config.js ：

所以加载器的顺序是正确的：postcss-loader（如果不在 dev 中）、sass-loader（用于 scss 测试）、css-loader 和 MiniCssExtractPlugin。

当我 webpack 时，main.css 文件很好地发出了，但是 html 文件的头部没有链接 href ......所以没有 css :-)

我想我错过了什么？

先感谢您 ！

我正在创建一个包含一些 vanilla sass 样式和一些 css 模块样式的单个 css 文件。有没有办法控制这一点，以便模块 css 在输出的 bundle.css 文件中的常规 css 之后出现？现在总是在它之前。

我已经尝试在 package.json 中重新排序它们。我试过使用oneOf。

我正在使用以下webpack.config.js文件构建两个 CSS 文件（editor.css 和 style.css）和一个使用插件的 JS 文件（block.build.js）mini-css-extract-plugin：

一切都按预期工作，但由于某种原因，除了block.build.js文件之外，我还获得了另外两个命名为以下内​​容的 JS0.block.build.js文件2.block.build.js：

我的问题是，为什么要创建这两个附加文件，我该如何避免这种情况？

提前致谢

我正在尝试将我的两个.scss文件转换为两个不同的.css文件：一个名为timer_player.css，另一个名为style.css.

style.css不能有任何timer_player.css风格。

ExtractTextPlugin我可以通过创建两个实例来做到这一点，但这个包已被弃用。

我的文件夹树看起来像这样：

我开始使用 webpack 制作 Wordpress 主题。我想将 sass 文件编译为 css 文件。

目标是将 style.sass 编译为 style.css 而不缩小并保留标准注释标题。

webpack.config.js

风格.sass

样式.css

代替...

我怎样才能做到这一点 ？

我有一个vue.config.js运行良好并取消默认代码拆分的设置。

但它仍然输出一个 CSS 文件，其哈希值与具有好名称的 CSS 文件相同。我可以编写一个脚本来删除它，但我想知道是否有办法将文件设置为不输出带有哈希的 CSS 文件。

vue.config.js：

命令行输出如下所示：

我只想输出../assets/js/sales-report.js和../assets/css/sales-report.css，但我没有找到正确的设置来取消 的输出../assets/css/app.fd4aa059.css。

如果您想测试，此配置将适用于任何 Vue CLI 3 项目。我缺少什么设置来取消这个文件？