问题标签 [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.
reactjs - 如何在 CSS 加载器中使用全局样式表
我试图弄清楚如何导入/需要全局 css,其中包括诸如 body 等标签的样式。我使用 css-loader + style-loader 和提取文本插件。我注意到 :global 选择器,但不知道我应该把 global.css 放在哪里并导入它。
谢谢
webpack - Webpack - 背景图像未加载
我对 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:
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
如何解决这个问题?
css - Webpack 优化最小化会破坏 Firefox 中的渐变?
我有一个简单的登录页面,我使用了 webpack。-p
如果我使用代表它的标志运行 webpack,-optimize-minimize
它将破坏 Firefox 中的 css 渐变。我看到的不是平滑的颜色变化,而是粗糙的条纹。
在后台使用 cssnano 模块的 css-loader。
知道是什么导致了这个问题吗?
谢谢,
css - CSS sourcemap 使用 Extract Text Plugin /CSS-loader Webpack
我正在尝试从 webpack 生成一个 css sourcemap。但是,目前css.map
生成的文件大部分是空的。
我了解我需要添加类似于以下内容的内容
但我不确定如何将它与 importLoaders = 1 链接起来,我目前在我的webpack.config.js
.
node.js - Webpack 包返回 CSS 的“找不到模块”
我有一个应用程序,其文件夹的结构如下:
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个多小时,检查了几十个教程,我已经完成了所有指定的操作。谢谢您的帮助!
css - React - 使用带有导入 css 的类名
我正在使用 react,我发现这个很棒的库可以帮助您为名为 classNames 的组件定义 css 类。我还在使用 webpack css-loader 来将 css 导入到我的组件中,并且在尝试将 classNames 与 import css 一起使用时出现语法错误。
这是我的例子:
我怎样才能同时使用两者?
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?
webpack - Webpack:为每个主题生成单独的样式表
我正在使用 CSS 模块有条件地加载顶级样式表(手写笔)。这在我运行 webpack-dev-server 时工作正常,但我正在尝试生成 2 个 CSS 文件:theme1.css 和 theme2.css。
这是顶级index.js文件。
Webpack 这里是 webpack.config.prod.js