问题标签 [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 投票
1 回答
990 浏览

reactjs - 如何在 CSS 加载器中使用全局样式表

我试图弄清楚如何导入/需要全局 css,其中包括诸如 body 等标签的样式。我使用 css-loader + style-loader 和提取文本插件。我注意到 :global 选择器,但不知道我应该把 global.css 放在哪里并导入它。

谢谢

0 投票
9 回答
46996 浏览

webpack - Webpack - 背景图像未加载

我对 webpack 还很陌生,但是 css-loader 或 file-loader 有一些问题。

我正在尝试加载背景图像,但它不能正常工作。即使 devtools 显示background-image样式,背景图像也不会显示。

background-image如果我将样式复制到element.style块中,一切正常。我在某个地方犯了一个愚蠢的错误吗?

body 标签应该有背景图片。该样式出现在开发者工具中并且没有错误:

1

我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg,但正文没有背景。

element.style如果我在 DevTools 中手动复制并粘贴 css 行,一切正常:

2

如果我捆绑使用webpack-dev-server或仅webpack在 Chrome 和 Firefox 中使用,就会发生这种情况。

其他样式,例如body { background-color: red }工作正常。

这是 webpack.config.js:

0 投票
1 回答
1225 浏览

javascript - Webpack没有构建css文件

因此,我按照http://webpack.github.io/docs/tutorials/getting-started/上的教程进行操作,但我被困在 css 样式加载器步骤上。这是我的 entry.js:

这是 content.js:

这是 style.css:

在此之后,我正在运行以下命令:

webpack ./entry.js bundle.js

我收到此错误:

版本:webpack 1.13.0 时间:866ms 资产大小块块名称 bundle.js 10.1 kB 0 [emitted] main [0] ./entry.js 115 bytes {0} [built] [4] ./content.js 45 bytes {0} [内置] + 3 个隐藏模块

./~/css-loader!./style.css 中的错误模块构建失败:ReferenceError:Promise 未在 LazyResult.async 中定义(/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib /lazy-result.js:157:31) 在 LazyResult.then (/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:79:21) 在 processCss ( /var/www/html/webpack/node_modules/css-loader/lib/processCss.js:198:5) 在 Object.module.exports (/var/www/html/webpack/node_modules/css-loader/lib/loader .js:24:2) @ ./~/style-loader!./~/css-loader!./style.css 4:14-73

如何解决这个问题?

0 投票
2 回答
17417 浏览

css - 带有 webpack css-loader 的源图

我正在努力让 sourcemaps 与 css-loader 一起工作。

控制台输出:

在此处输入图像描述

css-loader 的文档说:

源地图

要包含 SourceMaps,请设置 sourceMap 查询参数。

需要(“css-loader?sourceMap!./file.css”)

我的 webpack.config

我如何包含 sass

0 投票
0 回答
138 浏览

css - Webpack 优化最小化会破坏 Firefox 中的渐变?

我有一个简单的登录页面,我使用了 webpack。-p如果我使用代表它的标志运行 webpack,-optimize-minimize它将破坏 Firefox 中的 css 渐变。我看到的不是平滑的颜色变化,而是粗糙的条纹。

在后台使用 cssnano 模块的 css-loader。

知道是什么导致了这个问题吗?

谢谢,

0 投票
1 回答
2375 浏览

css - CSS sourcemap 使用 Extract Text Plugin /CSS-loader Webpack

我正在尝试从 webpack 生成一个 css sourcemap。但是,目前css.map生成的文件大部分是空的。

我了解我需要添加类似于以下内容的内容

但我不确定如何将它与 importLoaders = 1 链接起来,我目前在我的webpack.config.js.

0 投票
1 回答
6337 浏览

node.js - Webpack 包返回 CSS 的“找不到模块”

我有一个应用程序,其文件夹的结构如下:

myapp.css是一个简单、普通的 css,没有什么特别之处。只是一个样式body,看看它是否有效。我的webpack.config.js文件有这个:

我已将所需的 css 文件放在index.js这样的位置:

我已经尝试了所有方法来加载它,在资产字之前添加 ../ 以及所有内容,但我只是在控制台上不断收到此错误: Error: Cannot find module "assets/css/myapp.css"

我有仔细检查,并且css-loaderstyle-loader/node_modules文件夹中。

我究竟做错了什么?我坚持了3个多小时,检查了几十个教程,我已经完成了所有指定的操作。谢谢您的帮助!

0 投票
1 回答
15442 浏览

css - React - 使用带有导入 css 的类名

我正在使用 react,我发现这个很棒的库可以帮助您为名为 classNames 的组件定义 css 类。我还在使用 webpack css-loader 来将 css 导入到我的组件中,并且在尝试将 classNames 与 import css 一起使用时出现语法错误。

这是我的例子:

我怎样才能同时使用两者?

0 投票
2 回答
817 浏览

reactjs - web pack css-loader generated css class names with react-bootstrap

I'm using css-loader for web pack, and the configuration looks like this:

And then in my jsx file I have something like this:

And in my components/MyComponent/style.css file I have something like:

And so my problem is, css-loader will generate random ids for both .myComponent and .media-left, which is seriously annoying. Because .media-left is a bootstrap class and I want it just left alone. Is there a way to make css-loader only generate an id for the top level css class?

0 投票
0 回答
110 浏览

webpack - Webpack:为每个主题生成单独的样式表

我正在使用 CSS 模块有条件地加载顶级样式表(手写笔)。这在我运行 webpack-dev-server 时工作正常,但我正在尝试生成 2 个 CSS 文件:theme1.css 和 theme2.css。

这是顶级index.js文件。

Webpack 这里是 webpack.config.prod.js