问题标签 [css-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
36257 浏览

css - 使用 Webpack 和 CSS “你可能需要一个合适的加载器来处理这种文件类型”

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

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

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

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

sdocs.js 也很简单,看起来像这样:

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

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

我在 Windows 平台上运行很重要

0 投票
1 回答
1039 浏览

javascript - 似乎 webpack 忽略了“包含”和“排除”规则

我有以下文件夹设置:

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

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

0 投票
2 回答
3040 浏览

reactjs - 尝试将 css-loader 与 webpack 一起使用以最小化我们的 css

我尝试过十几个不同的搜索并阅读 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,这有意义吗?如果你们能告诉我为什么会出现这个错误,我将不胜感激。

再次感谢!

0 投票
1 回答
2059 浏览

angular - webpack css-loader 背景图片错误加载

我正在开发一个 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 文件上设置图像背景应该很容易

有什么想法吗??

0 投票
2 回答
431 浏览

css - React+Sass+Webpack 本地样式问题

我正在使用使用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

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

0 投票
1 回答
1494 浏览

css - Webpack bootstrap.css npm 模块无法使用 ExtractTextLoader + css_loader 解析

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

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

或者

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

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

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

webpack.config.js:

0 投票
1 回答
423 浏览

python - Webpack 设置,webpack 无法解析(打包成包)css 文件

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

文件结构:

这是我的 webpack 配置:

安装的依赖项:

错误信息:

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

现在错误是:

0 投票
1 回答
6492 浏览

sass - 如何使用当前的 webpack 配置从 sass-loader 获取有效的 css?

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

  • 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 的帮助下,我设法解决了我的问题。

0 投票
1 回答
372 浏览

webpack - 如何使用 loader 在 css 中处理 png

我正在用 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上述结果而失败。

0 投票
0 回答
223 浏览

angular - Angular 2. 在 sass 文件中引用 png 时出现 webpack 错误

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

我有以下 webpack 配置:

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

和我的 sass 文件:

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

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

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