问题标签 [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.
css - 使用 Webpack 和 CSS “你可能需要一个合适的加载器来处理这种文件类型”
我是 webpack 的新手,我已经能够用它来打包我的 javascript,但是 CSS 让我望而却步。我不断收到:
“你可能需要一个合适的加载器来处理这个文件类型”</p>
我的 css 文件的第一行之一。CSS 文件很简单:
webpack.config.js 看起来像这样:
sdocs.js 也很简单,看起来像这样:
最后运行 webpack 的结果是这样的:
我进行了三次检查,css-loader 和 style-loader 在本地加载。起初我将它们安装在全局范围内,但我将它们全局删除并在本地重新安装。顺便说一句,调试标志没有做任何额外的事情,输出没有变化,我认为这很奇怪。
我在 Windows 平台上运行很重要
javascript - 似乎 webpack 忽略了“包含”和“排除”规则
我有以下文件夹设置:
在我的webpack.config.js中,我有以下加载程序来处理 scss 和 css:
这里的想法是 css-loader 使用模块基本上将类名重写为.red
随机的东西.JHSKJasdasa
,但是,我希望它排除/lib文件夹并保留其中的类与它们相同(香草),但仍然是网格内的类.css 之类的.container
变得随机化。
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,这有意义吗?如果你们能告诉我为什么会出现这个错误,我将不胜感激。
再次感谢!
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 文件上设置图像背景应该很容易
有什么想法吗??
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">
. 到目前为止,我已经想到了两个(坏的)解决方案:
- 我以某种方式重新配置 webpack 以不使用 localIdentName 重命名某些 css 类名
- 我以某种方式
<ReactTags />
使用了类名:Test__active___2LBGS
这些似乎都不可行,所以我很困惑!任何帮助深表感谢。
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:
python - Webpack 设置,webpack 无法解析(打包成包)css 文件
我在我的反应代码中插入 css 时遇到问题。问题是 webpack 没有解析 css 文件。我根据文档做了所有事情,但没有运气。也可能是我为此使用 django 1.9 的问题
文件结构:
这是我的 webpack 配置:
安装的依赖项:
错误信息:
我尝试再添加一个入口点:
现在错误是:
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 的帮助下,我设法解决了我的问题。
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
上述结果而失败。
angular - Angular 2. 在 sass 文件中引用 png 时出现 webpack 错误
我有一个问题,我整天都在挠头。我将 Angular 2 与 webpack 和 SASS 一起使用,到目前为止它运行良好,直到我在项目中添加了我的第一个 *.png 图像。
我有以下 webpack 配置:
当我尝试运行它时,webpack 会生成以下错误:
和我的 sass 文件:
如果我删除背景图像一切正常。
我在 Angular 组件中导入 sass 文件的方式:
我对 Angular 1 应用程序使用了类似的配置,并且它工作了一个。我只是困惑为什么它不适用于此设置。