问题标签 [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 回答
468 浏览

angular - CSS 加载器的目的是什么

我现在正在玩 Angular2。我是网络和所有 javascript 世界的初学者,因为我主要是后端 .Net 开发人员。我对我们作为 javascript 库的所有选择感到困惑,这些库似乎以不同的方式做几乎相同的事情,但有一些明显的差异。

就我而言,我想知道当您可以使用组件的 styleUrls 属性时,ng2 组件中的 CSS 加载器的目的是什么。

我正在关注本教程http://teropa.info/blog/2016/02/28/metabubbles-generation-art-with-angular-2.html#extracting-a-circles-service但我正在尝试重现它使用打字稿代替。

在“使用 CSS 设置组件样式”部分,他们使用 Webpack 的 CSS 加载器,如下所示

目前,据我所知,这似乎没用,因为我们可以像这样使用组件的 styleUrls 属性

谁能帮我理解?如果使用 CSS 加载器是一个好习惯,因为我使用的是 SystemJS,我认为不支持加载 CSS 文件,我应该切换到 webpack 还是我找到的任何多个加载器。装载机确实人满为患,因为每次我查看示例时,我都会找到另一个装载机;)

0 投票
1 回答
2533 浏览

reactjs - Webpack CSS 加载器不会解析评论

我正在使用 react starter kit,我正在尝试从 bootstrap(通过 NPM 安装)导入 SCSS 文件,它抱怨评论:

这是 app.js 中的导入

然后通过 webpack 加载器:

有人知道为什么吗?

谢谢

詹姆士

0 投票
1 回答
435 浏览

webpack - webpack 外部 css -> 图像丢失导致错误,如何忽略?

我使用 webpack 让 Angular2 运行 PrimeNG。PrimeNG 依赖于 PrimeUI,它本身使用主题,并且其中一个(主题黑暗)缺少图像(无论如何它仅用于旧浏览器)。

但是现在当我使用 webpack 从中加载 css 文件时,它告诉我“找不到模块:错误:无法解析‘文件’或‘目录’......

我如何从外部控制 css 加载器或 sass 加载器(不确定最后谁处理它)应该忽略它?

谢谢!

0 投票
0 回答
1391 浏览

sass - 使用 CSS 模块时,为什么在全局上下文中会失败?

核心.scss

WebPack 配置:

错误:

模块构建失败:CssSyntaxError: postcss-modules-local-by-default: src/styles/core.scss:1:0: Missing whitespace before :global :global {

0 投票
1 回答
1166 浏览

css - Webpack 和 Sass 正确处理 background: url() 图像,但是在与 webpack-dev-server 一起使用时找不到它

我将 Webpack 2 和 webpack-dev-server 与 Sass 加载器一起使用,实际配置:

这工作得很好,其中引用的图像background: url()由 webpack 处理,并且还替换为类似的样式background-somehash.jpg,该文件可以通过键入来访问http://localhost:8080/background-somehash.jpg。当我使用开发人员工具在样式背景定义中提供整个 url(包括本地主机)时,它也可以工作......

唯一不起作用的是由 webpack 生成的原始 css,看起来像background: url(background-somehash.jpg). 我还尝试了各种 url,例如,./或尝试是否以某种方式设置了不同的 root。我没有得到的是该文件在根目录下很容易获得......../../.././images/

编辑: 当与extract-text-webpack-plugin将样式提取到单独的真实styles.css文件中一起使用时,它工作得很好。问题是为什么当从 javascript bundle 提供最终 css 时它不起作用?

澄清: 一切都被正确引用,图像可用,当我使用它将css提取到单独的文件中时一切正常,只是在提供完全相同的extract-text-webpack-plugincss时不起作用bundle.jsindex.html<link href="blob:..." rel="stylesheet">

0 投票
0 回答
3476 浏览

sass - SCSS 错误:找不到要导入的文件或无法读取

我将 sass-loader 从 0.2 升级到 3.2.0,将节点从 0.10.35 升级到 5.0.0 节点 0.10.35 和 sass-loader 0.2 一切正常。但是现在我在导入 scss 文件时遇到了以下错误。

Webpack 配置文件:

导入语句在 12cc-store/app/lib/mob/styles/modules/_template-layout.scss 文件中:

和 12cc-store/app/lib/mob/styles/functions/_common-functions.scss 是绝对文件路径

不知道我错过了什么。我尝试使用绝对路径,require() 语句而不是 @import,但仍然没有运气。我发现一个线程说降级节点版本,但这就是我想要做的。我想更新节点和所有节点模块。任何帮助表示赞赏。

0 投票
0 回答
116 浏览

node.js - 失踪 !导致“找不到模块” - webpack

我有使用 webpack 捆绑器的节点应用程序。每次我尝试捆绑它时,我都会收到此错误:

显然 node_modules 的路径错误存在问题,测试有 '!' 在它之前。这只发生在样式和 css 加载器上。webpack 是否有某种方式可以正确解释这种方式?

0 投票
1 回答
2579 浏览

reactjs - 使用 css-loader 和 react-router 修复相对路径

无论当前的应用程序 url 如何,我都无法弄清楚如何配置 webpack 以生成具有有效 url 的 css。这是我的项目结构:

/theme目录是一个引导主题。css 中的 url 是相对的。例如:

当我访问我的应用程序时,它的根 url(http://localhost:8080/)或带有单个段的 url(http://localhost:8080/about)一切正常。这些相对 url 被解析为基本 url。但是,如果我在 2+ 段 url ( http://localhost:8080/some/thing )上刷新浏览器,浏览器最终会请求以下 url:

http://localhost:8080/some/db812d8a70a4e88e888744c1c9a27e89.woff

React 路由器最终为 url 构建了正确的标记,但样式表中的 url 是相对的,因此会中断。我是 webpack 的新手,不知道如何解决这个问题。

这是我的 webpack 配置:

任何帮助将非常感激。

0 投票
1 回答
308 浏览

css - 用于在 Webpack 中启用热样式加载器以同步 css 的配置

我正在尝试在 Webpack 中启用热样式加载器,但我找不到合适的配置。这是我的 webpack.config.js:

还有我的 package.js 文件:

但无论我如何配置它,我都无法让热同步工作(对于 .css,对于 .js 文件,它工作得很好)!有人可以告诉我正确的方法吗?

0 投票
0 回答
76 浏览

reactjs - 为什么 webpack 在 boostrap css 之前输出本地 css?

我的应用程序使用引导 css 和本地自定义 css。问题是 webpack 的输出在 bootstrap css 之前包含了一些本地 css,并且在它之后包含了一些 css,尽管我的所有应用程序在引导后都导入了本地 css。有没有办法在引导 css 之后放置所有自定义 css?

[ webpack.config.js ]

[组件.js]

[部分.lcss]