问题标签 [css-loader]

我是 webpack 的新手，我已经能够用它来打包我的 javascript，但是 CSS 让我望而却步。我不断收到：

“你可能需要一个合适的加载器来处理这个文件类型”</p>

我的 css 文件的第一行之一。CSS 文件很简单：

webpack.config.js 看起来像这样：

sdocs.js 也很简单，看起来像这样：

最后运行 webpack 的结果是这样的：

我进行了三次检查，css-loader 和 style-loader 在本地加载。起初我将它们安装在全局范围内，但我将它们全局删除并在本地重新安装。顺便说一句，调试标志没有做任何额外的事情，输出没有变化，我认为这很奇怪。

我在 Windows 平台上运行很重要

我有以下文件夹设置：

在我的webpack.config.js中，我有以下加载程序来处理 scss 和 css：

这里的想法是 css-loader 使用模块基本上将类名重写为.red随机的东西.JHSKJasdasa，但是，我希望它排除/lib文件夹并保留其中的类与它们相同（香草），但仍然是网格内的类.css 之类的.container变得随机化。

我尝试过十几个不同的搜索并阅读 css-loader 上的文档，但我相信它们不是最新的。

我也在尝试学习来自前端 javascript / jquery 的反应代码和约定，所以这对我来说是新的。

我想要做的是使用我们的 css 并使用 css-loader 最小化它，但我不知道如何从我读过的内容中做到这一点。

我们当前的一段代码如下所示 - prod.config.js ：

这足以给我一个关于如何完成这项工作的建议吗？或者建议我在哪里可以获得更多信息？

文档说我应该像这样要求css： require("css-loader?minimize!./file.css")

但我不确定如何实施。

谢谢！

更新：

因此，在尝试了@Brandon 提到的内容之后，我实际上已经在我们的条目中看到了需要 css 文件的代码。

我将其更新为： require('css-loader?minimize!styles/app.css'); 但最终出现此错误：

但是那个词是@import，这有意义吗？如果你们能告诉我为什么会出现这个错误，我将不胜感激。

再次感谢！

我正在开发一个 Angular2+ES2015+Babel+Webpack 项目，当我在 CSS 文件中包含图像并使用时遇到了这个问题css-loader，已经花了好几个小时来寻找这个问题，但到目前为止还没有运气：

如果您搜索错误，您会在 github 问题和 stackoverflow 上找到类似的情况，但并不完全相同。在所有这些中，都指出了缺少图像加载器（此处为 png 文件），但在我的情况下，我有一个工作正常。如果require('../image/penguin.png')直接在 JS 文件上，它只会被加载并导出到输出路径！

我的流程和 Webpack 配置非常复杂，很大并且分成不同的文件，但这是有趣的部分

这里是触发错误的css

如果使用 css 看起来很奇怪，to-string-loader那是因为angular2-template-loader允许将 CSS 直接内联到 Angular2 Componet 的stylesUrl

由于错误堆栈，似乎一旦 css-loader 完成工作，png 文件就没有被定义的加载器（url！image-webpack）加载，而是用 babel-register 加载？所以我console.log是 css-loader 的结果，并且有预期的图像require：

所以我让 babel 忽略 png 文件

这会引发一个稍微不同的错误，因为 babel 忽略了图像，但最终似乎是相同的：

我一无所知，我要去 WTF 只是在 CSS 文件上设置图像背景应该很容易

有什么想法吗？？

我正在使用使用3rd party react 组件，但我无法正确配置我的 sass。这个组件创建了一系列<li>html 标签，如果其中一个<li>被点击，它会添加一个“活动”类名：<li class="active">. 我想为该活动 <li>元素自定义 css。为此，我创建了一个包含以下内容的 Test.scss 文件：

要使用这种样式，我做了以下反应

问题是，当 Webpack 加载这个 Sass 文件时，它使用css-loader，它将每个本地 .sass 文件中的每个类名转换为以下格式：“localIdentName=[name]_[local]__[hash:base64:5] ”。这意味着我的 css 不再适用于<li class="active">. 相反，它现在适用于<li classname="Test__active___2LBGS">. 到目前为止，我已经想到了两个（坏的）解决方案：

1. 我以某种方式重新配置 webpack 以不使用 localIdentName 重命名某些 css 类名
2. 我以某种方式<ReactTags />使用了类名：Test__active___2LBGS

这些似乎都不可行，所以我很困惑！任何帮助深表感谢。

我正在学习使用 node 作为前端构建工具，并且正在努力将引导程序包含到 css 捆绑文件中以包含在网页中。

我有一个用于 LESS 的加载器和一个用于 CSS 的加载器，以及用于 FONTS 的加载器，并且要求我自己的源代码中的任何一个似乎都可以正确地将 CSS 转换为我的包文件，但是只要我

或者

我在 webpack 期间收到以下错误：

我从包中检查了 bootstrap.css，第 7 行，char5 似乎是 html 和 { 文件中第一个 css 规则之间的“”空间，这是一个完全有效的 CSS 块注释...？我什至可以将该文件的全部内容复制到我的一个本地源文件（common/style.less）中，它会很好地解析并包含在包中。我根本无法从 node_modules 位置包含它。为什么？

我的 app.js 入口点如下所示：

webpack.config.js：

我在我的反应代码中插入 css 时遇到问题。问题是 webpack 没有解析 css 文件。我根据文档做了所有事情，但没有运气。也可能是我为此使用 django 1.9 的问题

文件结构：

这是我的 webpack 配置：

安装的依赖项：

错误信息：

我尝试再添加一个入口点：

现在错误是：

我即将为我的公司创建一个模式库。我正在使用以下软件：

• css-loader@0.23.1
• 提取-文本-webpack-plugin@1.0.1
• 节点-sass@3.8.0
• sass-loader@4.0.0
• 样式加载器@0.13.1
• webpack@1.13.2
• 解析 url-loader@1.6.0
• 节点@6.3.1
• npm@3.10.3

在我的电脑上（Windows 10）。

我的目标是使用该@import "colors"语句并获取相应的文件../patterns/globals/_colors.css。我尝试了includePaths带有属性的 sass-loader 和 resolve-url-loader 的配置root。但到目前为止都没有工作......

在我第一次使用 sass-loader 和 includePaths 运行时，我得到了以下错误报告：

在我第二次使用 resolve-url-loader 运行后，我收到了另一个错误报告：

二、尝试编译一个简单的sass，内容如下：

使用提到的 webpack 配置，我没有收到错误消息，但收到了无效的 CSS 代码，如下所示：

我不明白我失败的根源在哪里。

最好的问候， JBrieske

编辑：在@IRus 的帮助下，我设法解决了我的问题。

我正在用 webpack 打包一个 Angular2 项目。我的 app.component.ts 是：

它的cssapp.component.css是：

我webpack.common.js的是：

然后我得到一个错误：

我vender.ts的就像下面的例子：

我已经为 css 尝试了“原始”，但文件加载器并不喜欢它，也没有放入icon_background.png资产中。而其他尝试如'style!css', 'css', 'css/locals',loaders: [ 'style-loader', 'css-loader?sourceMap']也因获得TypeError上述结果而失败。

我有一个问题，我整天都在挠头。我将 Angular 2 与 webpack 和 SASS 一起使用，到目前为止它运行良好，直到我在项目中添加了我的第一个 *.png 图像。

我有以下 webpack 配置：

当我尝试运行它时，webpack 会生成以下错误：

和我的 sass 文件：

如果我删除背景图像一切正常。

我在 Angular 组件中导入 sass 文件的方式：

我对 Angular 1 应用程序使用了类似的配置，并且它工作了一个。我只是困惑为什么它不适用于此设置。