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

webpack 4 有一个简单的配置

CSS-file 被导入到入口点（index.js），需要在生产构建中将其输出到单独的 CSS-file（使用 mini-css-extract-plugin，想试试这个插件，而不是其他方法）。但出现错误： https ://i.stack.imgur.com/VoqTW.png

这是完整的文件结构 https://github.com/DazzRune/webpack4test

我们在部署之前使用 webpack 来捆绑我们的资源。但是，现在我们还想通过 webpack 打包我们的 sass 文件，这样可以简化我们的构建过程。现在，我们确实遇到了 MiniCssExtractPlugin 声称webpack_require未定义的问题。

我们不知道为什么会发生这种情况，但它们的潜在问题似乎与 css-loader 的代码有关。

我们已经尝试了很多方法来解决这个问题（例如尝试不同的版本、重新安装软件包、检查剩余的全局软件包等。但这些似乎都没有对结果产生任何影响。

感谢您提前提供任何帮助。

错误：

webpack.config.js

包.json

父组件（父组件）

子组件（子组件）

显示颜色是为父组件设置的颜色。父组件和子组件样式的加载顺序有问题。是包装问题吗？

我的 webpack 输出中出现了这两个警告：

冲突警告：多个资产向相同的文件名 custom_styles.js.map 发出不同的内容

冲突警告：多个资产向相同的文件名 vendor_styles.js.map 发出不同的内容

子 mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!src/styles/main.scss：入口点 mini-css-extract-plugin = * [. /node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./src/styles/main.scss] ./node_modules/css-loader!./node_modules/sass-loader /lib/loader.js!./src/styles/main.scss 9.22 KiB {mini-css-extract-plugin} [built] + 1 个隐藏模块子 mini-css-extract-plugin node_modules/css-loader/index. js!node_modules/sass-loader/lib/loader.js!src/styles/vendor.scss: 入口点 mini-css-extract-plugin = * [./node_modules/css-loader/index.js!./node_modules/sass -loader/lib/loader.js!./src/styles/vendor.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/vendor.scss 1010 字节 {mini-css-extract-plugin} [内置] + 14 个隐藏模块

我想用 webpack 4 打包一个 javascript 项目，但我正在努力处理 CSS 文件。我捆绑的 JS 文件将被其他网站使用带有绝对 URI 的脚本标签。所以我希望我的包为样式表注入链接标签，以便管理文件名中的哈希。

我的样式源是一个scss文件。当我使用它时效果很好，style-loader但我想将 CSS 提取到另一个文件中。

我尝试了以下方法webpack.config.js：

它在输出目录中创建了我的 CSS 文件，但加载器不会像之前那样将它注入到 DOMstyle-loader中。而且我不能style-loader在之后使用mini-css-extract-plugin。

我不能使用html-webpack-plugin，因为没有 HTML 输出文件。有没有办法用现有的装载机做我想做的事？有没有办法在JS中获取提取的文件url来自己创建链接标签？

我的 devDependencies ：

谢谢你。

然后获取构建的css文件：

构建的 css 文件中 url 中的哈希值不同。如何让他们一样。
谢谢！

我正在尝试将 CSS 模块用于 html，由 html-webpack-plugin 生成。

重现错误的代码

src/index.ejs

src/styles.css

与以下配置捆绑在一起的这段代码以某种方式工作（css模块散列类名找到了生成的方式index.html）：

webpack.config.js

但问题是 CSS 块没有被 emmited。

当我添加mini-css-extract-plugin到配置以获取 CSS 块时，它会引发错误：

webpack.config.js

通过从 JS 文件导入相同的模板来加载它时，一切都按预期工作。

更新。临时解决方案是有2个规则集，一个用于模板（w/out mini-css-extract-pluginand onlyLocals），一个用于js，具有规则集，并在JS中复制相同的样式导入。

这并不理想，但会产生 html + css 模块。

尝试加载在 SCSS 中定义的 CSS 背景图像，并通过 WebPack devServer 提供服务。

SCSS 中定义的背景图像被 WebPack 拾取，但它不会显示在页面上。

我已尝试设置publicPath选项MiniCssExtractPlugin.loader并查看了与此问题相关的所有答案，但无法使其正常工作。

更新：还尝试publicPath在file-loader. 根据文档，这默认为输出 publicPath，这在我的情况下是相同的。

更新：当在 SCSS 中使用绝对路径时，它会作为确切路径编译为 CSS，但这不适用于本地 dev 和 staging 和 prod 都有不同的路径。

运行时输出的相关部分webpack-dev-server：

索引.scss：

CSS 输出：

我的 WebPack 配置：

索引.ts：

我无法理解如何将我的 scss 文件编译和缩小为 css，同时保持相同的文件夹和文件结构。我正在使用 MiniCssExtractPlugin 提取所有内容，以及 style-loader、css-loader、postcss-loader 和 sass-loader

这是我的 src 文件夹中的文件结构

app.scss包含所有导入。从文件夹 1-7 导入。我首先遇到了导入问题，然后在编译和最小化剩余的 scss 文件时遇到了问题。

最终目标是使编译后的文件夹看起来像这样，每个文件都被最小化，并且 app.scss 捆绑所有导入

这是迄今为止我为 webpack.config.js 编写的代码

运行此代码时，我只是在不包含导入的 css 文件夹下获得了一个 app.css 文件，并且也没有包含其他文件。有人可以帮助我了解我需要采取的过程吗？我一直在阅读每个加载程序的文档，并没有真正理解我在寻找什么。

谢谢！

我在项目的 dist 文件夹中生成多个 *.html 文件（使用file-loader复制）。styles.css的导入（从我的 src 文件夹中的 scss 文件生成）存在于生成的index.html中，但不在位于我的src/pages中的其他生成的 html 文件中（并且也在dist文件夹中生成）。

如何在所有生成的 html 文件中添加 styles.css 导入，甚至在所有目标 html 文件中添加更好？

提前感谢您的帮助。