问题标签 [webpack-style-loader]

我有 2 个需要内部样式的 React 组件：

产品列表：

产品详情：

它们有不同的样式，它们相互覆盖，为简单起见，我们假设它是background-coloron 的属性body：

列表.css

详细信息.css

实际发生的情况 - 当被 webpack 的样式加载器捆绑时，两个元素的样式都保留在页面上：

加载器的 webpack 配置：

这意味着详细信息的样式也在列表页面上处于活动状态。保持它们不同的最佳策略是什么？有没有办法更换样式？

./app/index.scss 中的错误找不到模块：错误：无法解析 C:\Users\johnliang\Temp\webpack-angular 中的“文件”或“目录”./../node_modules css-loader/index.js /app@./app/index.scss 4:14-116 13:2-17:4 14:20-122

./app/index.scss 中的错误找不到模块：错误：无法解析 C:\Users\johnliang\Temp\webpack-angular 中的“文件”或“目录”./../node_modules style-loader/addStyles.js /app@./app/index.scss 7:13-68

index.scss 没有加载到最终的 webpack 输出中。

我需要所有图像都与本地样式表相关。如果我添加 root=. ，尽管我将其添加到 url(/path/) 之前，但我需要添加一个文件加载器，但无论如何路径都是错误的。

如果我直接在 CSS 中编写相对路径，那么我还需要使用文件加载器。如果我在 CSS 中编写非相对路径，那么 CSS 路径不会发生变化，但图像无法加载，因为它们必须相对于样式表位置，没有其他方法可以正确加载它们。我还使用 ExtractTextPlugin 为 CSS 提供单独的文件，但路径无论如何都是错误的，无论有无 ExtractTextPlugin。

我的问题是，如果我没有在 output.publicPath 配置选项中指定完整的域；然后 url 不能正确加载（至少是字体）。

我的 webpack 配置：

我有一个较少的文件，其中指出：

我的服务器位于http://localhost:5000。

当我在 chrome 中调试时检查生成的 CSS 时，我看到它已被替换为：

这似乎是正确的！但是不起作用Chrome开发工具报错：“无法解码下载的字体：http://localhost:5000/widgets/damian/9789/en ”表示它试图加载一个字体那个url，但是那个url是我当前的位置，我在哪里提供 html。而且我不知道为什么要尝试从该 url 获取字体。

如果我去：http://localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot。有用。

当我将 publicPath 更改为：' http://localhost:5000/assets/ '时，一切都解决了。但这是我想避免的事情，无论如何我想了解为什么会发生这种情况。

我的猜测是，由于样式加载器将 CSS 添加为 Blob，因此 CSS 丢失了“当前域”的概念，因此其中没有域的 url 表现得很奇怪。

但与此同时，这应该发生在每个使用 webpack 和 CSS 的人身上，我还没有看到任何关于它的评论。:S

谢谢！！！

我正在使用 Webpack 来捆绑我的 Angular js 代码。但是我无法编写基于 mocha 的单元测试用例 bcz gulp-mocha 未能“要求”css。以下是详细的代码片段。

Benefits.js 角度 js 指令：

Benefits_test.js 是单元测试用例文件：

我很高兴跟随错误

我知道它失败的 bcz gulp-mocha 无法理解“css”文件。我如何编写测试用例？require(./../benefits.css)我的指令代码之外是否有移动“ ”？

我想将所有依赖项保留在相同的指令代码中（使用 webpack）。请帮忙

我们在我们的应用程序中使用este.js 开发堆栈，它使用 webpack 来捆绑 JS 和 CSS 资产。Webpack配置为webpack.optimize.UglifyJsPlugin在构建生产环境时使用stylus-loader，以及生产环境的确切加载器配置。如下：

然后我有3个样式文件：

在生产构建之后，两个关键帧动画都被重命名为a（可能是一些 CSS 缩小css-clean），并且您可以推断出fadeIn覆盖arrowBounce，因为缩小后的名称相同且优先级更高。

文件components/component1.styl和components/component2.styl被包含在他们的 React 组件文件[name].react.js中使用语句：

我要疯了。尝试了许多不同的解决方案，但没有一个真正奏效。

我正在开发一个使用 Webpack 捆绑模块的 Web 应用程序。无论出于何种原因，在应用程序中引入 Firebase 都会导致 Webpack 抛出错误。当 Webpack 尝试加载 Firebase 模块时会发生此错误。

如何从 Webpack 中排除 Firebase，但仍然可以调用

import Firebase from 'firebase';

从我的 JS 文件中？

这是错误的一些屏幕截图。

图 1 图2

我有一个相当复杂的样式表加载器设置：

效果很好，但在某些情况下，我想将modules选项添加到 css-loader，所以它看起来像这样：

但我不能到处这样做。

我该如何配置它，以便我可以在某些要求上启用 css-loader 模块标志，同时保持其余部分相同？

也许像加载程序“别名”之类的东西，例如require('./foo.scss!my-scss-with-modules-flag-alias')？

我能想到的唯一解决方案是编写一个加载器，它进行语法转换以将加载器配置内联到某些要求调用中......但这很脆弱而且很复杂。

因为我正在使用 Webpack 来捆绑我的 css，并且我的脚本标签位于我的 HTML 的底部，所以在初始页面加载时，我得到的页面内容没有任何样式。

然后突然之间，当脚本启动时，样式就出现了。

Webpack 在帮助捆绑 CSS 方面非常有用，但这种行为非常令人不安，并且不能真正接受。

解决这个问题的常用方法是什么？

我遇到了一个问题，我需要在由 Webpack 构建的 React 应用程序上运行 Jest 测试。问题是处理requireWebpack 通常会使用加载器处理的 CSS 文件和图像等。我需要知道正确测试我的组件的最佳方法是什么。

反应组件：

笑话测试：

我遇到了这个问题，这让我放心，我自己尝试了所有这些方法是正确的，但我遇到的所有解决方案都有问题：

解决方案 1： 使用一个scriptPreprocessor文件，该requires文件去除需要 Webpack 构建的非 Javascript 文件，例如需要.css,.less等.jpegs。这样我们可以测试 React 组件，但仅此而已。

问题：我想测试 Webpack 构建创建的一些功能。例如，我使用本地的、可互操作的 CSS，并且我想测试从require('whaterver.css')Webpack 创建的 CSS 类返回的对象。我还想使用findRenderedDOMComponentWithClassfrom React/TestUtilswhich 意味着我需要通过 Webpack 构建 CSS。

解决方案 2： 使用scriptPreprocessor通过 Webpack 运行组件并构建测试文件（如jest-webpack所做的）并在此输出上运行测试的脚本。

问题：我们不能再像现在使用 Webpacks 那样使用 Jest 的自动模拟__webpack_require__(1)。每次运行测试文件时，这也很慢。

解决方案 3： 与解决方案 2 非常相似，但在运行之前只为所有测试文件运行一个构建，npm test以解决构建时间缓慢的问题。

问题：与解决方案 2 相同。没有自动模拟。

我在这里走错了路还是有人对此有任何答案？我错过了显而易见的事情吗？