问题标签 [extract-text-plugin]

当我使用以下语法时，我的样式没有加载

但是当我使用这样的模块时它们会加载（这是有道理的，因为我将css-loader modules选项设置为true）：

为了扩展上述内容，我将样式加载到 React 组件中，如下所示：

我知道我可以通过 轻松内联样式import '!style-loader!css-loader!sass-loader!../styles/loading-overlay.scss';，但我希望将它们导出到单独的组件 css 文件中。

我正在使用 Webpack 2.2.1 和 extract-text-webpack-plugin 2.0.0-rc.3

以下是 Webpack 配置的相关（AFAIK）部分：

任何想法为什么这可能不起作用？我需要提供任何其他信息吗？

我正在尝试在我的 React + Webpack 项目上运行 SASS 编译并继续遇到此错误：

遵循本教程中的指南：链接

这是我的 webpack.config.js

有什么建议么？

当我想通过我构建我的前端时，webpack -p --progress --hide-modules我收到以下错误：

我没有碰任何我的 webpack 配置文件。我正在使用这个包版本：

和我里面的这个配置webpack.config.js：

我正在运行节点版本 7.6，但也尝试了 7.3，但没有成功。似乎使用 ExtractWebpackPlugin 作为正确的加载器并没有被注意到。你知道这个问题的任何解决方案吗？已经尝试过不同的包版本组合。

我正在使用 React Router 和 Webpack 2 对我的 JavaScript 文件进行代码拆分，如下所示：

此捆绑包的结果：

这意味着最终用户只能根据他/她所在的路线获得他/她需要的 JavaScript。

问题是：对于 CSS 部分，我没有找到任何资源来做同样的事情，即根据用户的需要拆分 CSS。

有没有办法用 Webpack 2 和 React Router 做到这一点？

编辑：发布此问题后不久找到了解决方案。请参阅下面的我的答案。

我有一个基于 webpack 2 的项目，它使用ExtractTextPlugin将 SCSS/CSS 提取到单独的文件中。

此外，我在 webpack (vendor和app) 中定义了两个入口点，它们构建到我的 JS 包中。

出于某种原因，ExtractTextPlugin 似乎破坏了为应用程序包生成的源映射，app.js.map. 如果我查看源映射，它指向提取的 CSS 文件中的随机行，而不是 JS。

查看源映射文件本身，我只看到“源”下列出的 CSS 和 SCSS 文件（下面的缩短示例）：

但是，如果我ExtractTextPlugin在 webpack 配置中注释掉，我会在源代码中列出 JS 文件：

所以不太确定这里发生了什么......似乎ExtractTextPlugin是在破坏或覆盖应用程序包的源映射？

以下是我在 webpack 配置中定义所有相关插件的方式：

有什么想法可能导致这种情况吗？会不会是与 UglifyJS 和 ExtractTextPlugin 的某种冲突？我的配置问题？

我想问一下，在为我的生产运行 npm 后，如何将生成的带有哈希名称的 css 文件链接到我的 index.html：

这是我的 webpack 配置中的插件，它将生成带有哈希的文件名，因为每次我为生产构建它都会生成一个新的哈希文件名。有没有一种方法可以在不手动编辑 index.html 的情况下自动完成？

我在extract-text-webpack-plugin提出了这个问题，但目前看来这个插件不支持这个功能（我不确定）。

如何在下面的示例中提取main.scss和home.scss进入main.css和？home.css

结果：没有错误，只是home.css创建了。

主页.js

主文件

主页.scss

webpack.config.js

我一直在尝试理解 webpack 中的“生产模式”。从我现在在 webpack 2 中收集的内容来看，您可以运行webpack -p，但这似乎并不丰富。我从 Webpack 1 继承的设置是这样的：

我真正想要的是使用extract-text-plugin生产模式，我尝试了以下操作：

我收到以下错误：

我正在使用 webpack 构建一个普通的应用程序（JQuery、ES6 等），它是通常的加载器。我遇到了以下情况：

• 在开发中，我希望使用style-loader将我的 css 放入内联标签中。
• 在生产中，我想要一个缩小的css-bundle-file（dam，一个词），我可以稍后缓存并避免FOUC。为此，我正在使用众所周知的提取文本插件。

问题是，当我在生产中时，我需要在 <link href="some-bundle.css" />我的index.html. 好的。但是通过这样做，在开发中我每次都会得到 404，因为我的 css 不是来自任何外部源（它来自 JS，它是内联的）。如果我不添加链接标签，我永远不会得到编译的样式表。

那么，你如何做到这一点？是否有任何加载程序可以自动添加<link>生产？或者你只是稍后手动添加它？

谢谢，[]s

我正在尝试使用新的 Webpack 2 配置将选项传递给 css 加载器：

但是这些选项不起作用。我做错了什么？