问题标签 [extract-text-plugin]

我正在编写一个 Webpack 插件，它应该用 Webpack 生成的 CSS 文件列表替换部分 JS 代码。成像这个 JS 代码：

我想injectReactWebComponent: true用

而那个链接标签是由 Webpack 生成的文件。

我的（工作类型）代码如下：

看我做的那一行

我直截了当地重写了来源。

但这似乎不适合我。看来我正在转换的代码已经生成，不应该再转换了。我也很确定我用这个打破了源地图。

所以我想知道，什么是实现我正在做的事情的合适方法？

我猜测我应该使用转换部分loader，但是加载器不知道生成的文件名，或者是吗？

任何帮助，将不胜感激！

我正在编写一个create-react-app使用 Webpack 和生成extract-text-plugin捆绑文件的 React 应用程序。现在我想知道我的 JS 文件中生成的 CSS 文件的文件名，如下所示：jscss

这是否可能，也许使用自定义加载器或 Webpack 插件？

编辑澄清：create-react-app不是这里的问题，我可以弹出它或创建自定义配置。我的问题是如何从 JS 脚本中知道 CSS 文件名。

我无法ExtractTextPlugin与css-loader. 如果我运行，我会收到以下错误webpack -p：

我的项目结构是这样的：

我的全局 styles.css 的内容是：

styles.cssErrorMessage 组件中的内容为：

这是我的 webpack 配置：

我究竟做错了什么？如果我不使用composes所有东西都可以提取出来。请注意，如果代码在开发模式下运行，我不会收到错误消息，所以我认为这与ExtractTextPlugin配置有关。我正在使用webpack v3,node v8.4.0和extract-text-webpack-plugin v3.0.0.

我正在尝试为我的 react 项目创建一个脚手架，并在此过程中学习 webpack。我一直在尝试将我的 css 模块化在他们自己的组件文件夹中，并将它们提取到构建文件夹中的单个 styles.css 文件中。

问题是在每个模块化的 .css 文件中，我都有媒体查询，有时它们在相同宽度断点的特定规则方面重叠。这导致在我提取的 styles.css 文件中出现一堆重复的 @media all 和 (min-width: 400px)-esque 语句。

因此，为了解决这个问题，我发现了这个似乎在他们的在线工具中起作用的 csso 插件。它将所有这些重复的@media 语句合并（通过重组）为一个，并将不同的规则放入其中。问题是在我的项目中，只有当重复的 @media 语句来自同一个文件时（这不应该发生），它才会这样做。如果它们来自不同的文件（这是我要解决的问题），它们不会被合并。

现在，我不确定这些插件如何在后台工作，但我想 csso-webpack-plugin 正在解析所有文件，然后将结果添加到包中，然后提取到 styles.css，而不是解析样式.css 直接。谁能想到这个问题的解决方案？

我的生产配置如下：

我的 index.css 看起来像这样：

我的 App.css：

以及由此产生的styles.css

当我使用 ExtractTextPlugin 提取 .pug 文件时，它会将其转换为 html 但会缩小，因为它会取消缩小？

我在我的 webpack 配置中使用以下模块 -

我收到一个错误Uncaught Error: Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve 'shared/variables

看起来我的 css 无法导入文件。知道我做错了什么吗？

我正在使用 webpack 3.5.5 并提取文本插件 3.0.0

基本上我想在生产中提取 css，但我想在开发模式下将它留在 JavaScript 文件中。

这样我就可以使用显示使用的 sass 文件的源映射。

我希望能够拥有：

地面上的文档有点薄。

所以在开发模式下site.css将是空的，并且不会像它不存在那样导致错误。css.js将用于样式和源映射。

在生产模式下css.js将存在但不做任何事情，因为 css 已被提取。这意味着 css 将很好地快速加载并缩小，site.css但没有映射。

我一直在尝试在 webpack 中使用 sass-loader 并按照此说明进行操作-> https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less但这不是在职的。

有谁能够帮我？

存储库

https://github.com/gpincheiraa/boolean-html-js-exercises/tree/dev

错误

依赖项

webpack.config.js

我在使用extract-text-webpack-pluginWebpack 3 将样式表标签放置在正确位置时遇到了一些问题。

我的项目使用从 CDN 提取的第三方样式表以及本地样式表包。我希望第三方样式覆盖我的本地包，但提取文本插件将本地样式标记放在最后。这是一个问题，因为本地包包含破坏第三方组件的重置。

我的 index.html 模板看起来像这样（释义）：

这是生成的标记：

我在文档中搜索extract-text-webpack-pluginand html-webpack-plugin，但一无所获。有谁知道如何用第三方样式覆盖我的本地样式？

对于更多背景知识，我的 CSS 配置如下所示：

我也在使用 HtmlWebpackPlugin：

我正在使用"webpack": "^3.1.0"和 "extract-text-webpack-plugin": "^1.0.1"

尝试编译 sass，我收到以下错误：Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

我已经根据提供的文档使用了它 - 不明白为什么我会收到 webpack 构建错误。

这是我的 webpack 文件：