问题标签 [css-loader]

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

谢谢

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

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

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

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

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

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

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

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

这是 webpack.config.js：

因此，我按照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

如何解决这个问题？

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

控制台输出：

css-loader 的文档说：

源地图

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

需要（“css-loader？sourceMap！./file.css”）

我的 webpack.config

我如何包含 sass

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

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

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

谢谢，

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

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

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

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

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

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

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

我有仔细检查，并且css-loader都style-loader在/node_modules文件夹中。

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

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

这是我的例子：

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

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?

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

这是顶级index.js文件。

Webpack 这里是 webpack.config.prod.js