问题标签 [webpack-style-loader]

我已经使用 webpack 和 reactjs 创建了一个应用程序。到目前为止，我已经创建了 2 页。我已经为这两个页面定义了 CSS 样式。但是当我在加载第 1 页后加载第 2 页时，第 1 页的样式会干扰第 2 页的样式。

例如

第 1 页

样式1.css

第2页

样式2.css

在page1之后加载page2时，span的颜色为红色，是从page1的style加载的。有什么办法可以避免这种干扰，还是我在这里做错了什么？

我将 style-loader 与 webpack 和 react 框架一起使用。当我在终端中运行 webpack 时，我得到Module not found: Error: Cannot resolve module 'style-loader'了 import.js 文件，尽管我已经正确指定了文件路径。

webpack.config.js：

我正在使用react-slingshot启动工具包启动应用程序。我想从 node_modules normalize.css 和 react-toolbox 加载，但在构建过程中出现这些错误：

这是我的 index.js：

这是我的 webpack.config.js // 有关此文件的信息，请参阅 webpack 和 webpack-hot-middleware 文档 // 而不是为每个环境硬编码 webpack.config.js， // 该文件生成一个 webpack 配置对于传递给 getConfig 方法的环境。从“webpack”导入 webpack；从“路径”导入路径；从'extract-text-webpack-plugin'导入ExtractTextPlugin；

可能是什么问题？谢谢。

我正在使用Webpack捆绑我的模块，并在基于反应的应用程序中使用sass进行样式设置。

使用单独的样式表，我正在设置组件的背景图像并将该样式表加载到index.js. 样式表中的所有样式都应用于该组件，除了背景图像。

这是我的示例样式表

解决该问题的一种方法是明确要求图像，然后为反应组件创建内联样式。

但是我想在我的样式表加载后立即从我的图像文件夹中加载所有图像，而不是单独要求每个图像。

我的 webpack 配置文件是

我可能遗漏了一些琐碎的要点。任何帮助表示赞赏。

我在一个名为“variable.less”的文件中有一个 LESS 变量，它看起来像：

我正在尝试将该变量导入一个单独的 LESS 文件并按如下方式使用它：

这给了我以下错误：

预期 ')' 得到 '+'

如何正确执行此操作？

我试图重新配置我的 webpack，现在我无法加载 css 文件。我将我的样式保存在 src > styles > main.css

我收到错误，例如

这是我的 webpack 配置

下面是package.json

我正在尝试将 NODE_ENV 注入到 sass 文件中，因此我可以为 dev/prod env 提供不同的输出，并有一个 sass 函数，其中包含类似的条件： @if (NODE_ENV == 'prod') {}

我的 webpack.config 看起来像这样：

我尝试将数据参数传递给加载程序，但我尝试过的没有任何效果。将不胜感激任何帮助！

我正在开发 reactjs 应用程序并使用 webpack 捆绑应用程序。

这就是我在 index.html 文件中设置 css 文件路径的方式。

当我在npm run dev本地运行命令时，系统会在端口 8080 上运行一个 Web 服务器，我可以访问该应用程序。这一切都很好。

当我在不同的环境中部署应用程序时，由于某些策略，我们需要将应用程序托管在子文件夹下。

这意味着在应用程序中使用相对路径的任何资源都需要了解此更改。

假设子文件夹名称是TEST. 在这种情况下，在本地可以作为http://localhost:8080/abc.png使用的资源现在可以作为http://localhost:8080/TEST/abc.png使用。

我不确定处理这种情况的最佳方法是什么。我在想的是我将创建一个全局变量调用 window_context，每个使用相对路径的资源都将使用这个变量。

所以不包括styles.css我将使用

如果我在本地运行应用程序，则变量将为空，如果我使用 webpack 创建包，我将设置 window_context = '/TEST'.

如何使用 webpack 访问变量并根据我正在运行的命令为其分配一个值。

因此，如果我说npm run dev（在本地运行应用程序并启动 Web 服务器）window_context 应该设置为“”，如果我运行npm run build（创建一个包），它应该将 window_context 设置为“/TEST”

我有以下 Webpack 配置（大致上，它已经为这篇文章简化了）：

现在这对于在 scss 文件中通常引用的图像非常有效：

但是，在使用指令时它不起作用：:local

我认为那是因为root它是为 CSS 加载器定义的。我得到一个构建错误：Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

相反，如果我root从 css-loader 配置中删除，那么它构建得很好，但是在 Chrome 的检查器中路径“看起来”是正确的，但是当你实际在新选项卡中打开链接时，它指向：chrome-devtools://devtools/bundled/"/images/bg.png"这显然不能正确解析.

我不确定问题是否出在url-loader配置上，或者到底发生了什么。

我尝试了不同的 webpack 配置来指定 resolve.root、resolve.modulesDirectories 等，但完全不确定它们是否有任何影响，或者我是否完全错误。我也遇到过，resolve-url-loader但不确定这是否是我所需要的。

有任何想法吗？大都会！

更新

我应该注意，它在 Safari 中运行良好，但在 Chrome 中却不行。所以这似乎是一个特定于 Chrome 的错误，但必须在 Safari 中完成所有开发是不切实际的。

我还遇到了vue-style-loader，它是 style-loader 的一个分支，声称可以解决这个问题，但它修复它的方式是依赖于一个 hacky 已弃用的 escape/unescape 方法。

假设我有以下 2 个组件，直接需要相同的实用程序 css 文件。

组件一：

组件二：

然后我将它们包含在我的应用程序中：

主应用：

我希望捆绑系统知道只导入some-other-css.scss一次。

style-loader + css-loader 是否已经开箱即用？

此外，

如何处理内部 css 导入？

如果我通过 import 语句在 javascript 中导入了 cssFile1 和 cssFile2：

而且cssFile1和cssFile2都在内部导入了cssFile3，cssFile3的内容会在file1.css和file2.css中出现重复吗？或者 sass-loader 会解决这个问题并且只包含一次 cssFile3 吗？