问题标签 [extract-text-plugin]

我有一个包含多个反应组件的仓库，这些组件需要彼此完全分开工作，因此每个组件都有自己的输出目录，其中包含各自的 CSS、JS 和 HTML。为了实现这一点，我迭代了一个包含所有组件名称的数组，添加了入口点、HTMLWebpackPlugin、SASS 和 CSS 加载器以及提取文本插件，每个都带有组件的路径。

这仅适用于一个组件，但由于某种原因，当添加第二个组件时，第一个组件的样式会消失，这意味着相应的 CSS 文件只有全局样式，而不是组件特定的样式。这可能与 ExtractText 插件无法与多个实例一起正常工作有关，但我真的不确定。

Webpack 构建输出的屏幕截图

查看 webpack 构建输出，您可以看到，第二个 css 文件要小得多，因为它只有全局样式。让我恼火的是，两个 css 文件都列出了两个组件块，这是什么意思？

这里有没有人对此有适当的解决方案或试图实现类似的目标？他们是我不知道的明显方式吗？提前非常感谢！

我们将 Extract Text 插件与 Webpack 3 一起使用，效果很好，但我们最近聘请了一位在 Selenium 工作的 QA 自动化工程师。

我们正在讨论使用 Selenium 更容易选择元素的方法，但在前端。这将涉及我们编写我们不使用的 CSS，以便让一个类在组件上呈现。与插件本质上的作用相反。

有没有办法用插件来完成这个？如果您曾在 Selenium 工作过，也欢迎提出建议。甚至可能是黑客攻击。

例子：

在这一行 className={ [styles.option, styles[label]].join(' ') }中，只有一个映射项的标签将其标签应用为一个类，因为它具有相应的 CSS。其他的不是基于提取文本的工作原理。

这就是 QA 工程师很难在 HTML 中查询特定元素的地方。

我曾想过能够运行testing模式，但为测试呈现不同的东西有点违背了针对将用于生产的真实世界代码进行测试的目的。

我已经阅读了大量的教程并查看了比我想记住的更多的 Github 存储库，但我真的很难设置 Webpack 3 来执行以下操作：

• 将 SASS 编译成 CSS
• 在 dist 目录中创建 CSS 文件
• 在 CSS 上运行 Autoprefixer

下面是我的 webpack.config.js：

眼下：

• webpack 开发服务器正在运行。
• 样式从 src/scss/styles.scss 复制到 src/index.html 提供的 HTML 文件中的内联样式块。

我希望创建一个 dist 目录，其中包含一个 styles.css 文件，然后我可以从我的 HTML 中链接到该文件。

谢谢

我正在构建一个反应应用程序，并使用带有 css/sass 加载器的 webpack 3 + ExtractTextPlugin 来编译我的样式并生成 main.css。我所有的 scss 变量、mixins 和部分都编译到一个 main.css 文件中，但我的问题是我在 main.css 中得到了重复的类。

我有一个 main.scss，我在其中导入了所有变量、mixins 和 partials。我还为我的所有部分、变量等使用下划线前缀。

我无法弄清楚问题是什么！

webpack.config.js

_button.scss

主文件

我的所有课程都在输出 css 中重复： main.css

我有一个相当标准的 Webpack 规则来假设 SASS 文件：

但是，这似乎会产生错误：

删除 ExtractTextPlugin.extract 调用并直接使用我的加载器列表可以正常工作，这让我怀疑 ExtractTextPlugin.extract 中缺少某些内容。

I want to alias the the relative font and image imports in my css and scss modules with absolute paths. The goal is store all of my font and image files in two central folders, without going through every css file and changing the relative imports, which would be difficult especially with minified third party stylesheets like bootstrap. I'm not making much progress and setting the aliases is causing many of my relative imports to not resolve when running webpack.

Is it possible to achieve this folder structure using the alias option?

css-loader in the webpack config object

The project is a large muti-page jQuery app with one webpack entry point per page

我正在从 webpack 1 迁移到 3。在经历了这么多错误之后，现在我陷入了困境。有人可以帮忙！

我收到这些错误 -

这是示例回购 - https://github.com/shivamkumar110/webpack-3-test

这是我的webpack.config.js的片段

我正在使用最新的一切。

我正在将 SASS 转换为 CSS 并引用图像：

图像根据我的设置进行更改，但是在 Webpack 执行此操作后路径不正确...

生成的 CSS 是：

但它必须是：

我在这里走到了尽头，尝试了我能想到的一切......

这是一个示例仓库： https ://github.com/joacim-boive/webpack-setup/tree/labb1

我来自 repo 的 webpack.config.js 文件：

配置

webpack.config.js

postcss.config.js

包.json

附加信息

问题

运行此配置时，我没有收到错误。它就像 postcss-loader 不存在一样运行，并给了我普通的 css。我正在尝试运行发布在autoprefixer 站点上的基本示例

所以我有一个使用 webpack 的 Angular 应用程序。自 12 月以来我没有改变任何东西，它运行良好。但是，在将 repo 拉到新机器上并确保我已运行命令npm install后，webpack我收到以下错误：

我不知道为什么会突然发生这种情况。任何人都可以阐明可能导致这种情况的原因吗？

这是我的 webpack 配置文件：

webpack.common.js

webpack.dev.js

在package.json我有：

谢谢！