问题标签 [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.
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 还是我找到的任何多个加载器。装载机确实人满为患,因为每次我查看示例时,我都会找到另一个装载机;)
reactjs - Webpack CSS 加载器不会解析评论
我正在使用 react starter kit,我正在尝试从 bootstrap(通过 NPM 安装)导入 SCSS 文件,它抱怨评论:
这是 app.js 中的导入
然后通过 webpack 加载器:
有人知道为什么吗?
谢谢
詹姆士
webpack - webpack 外部 css -> 图像丢失导致错误,如何忽略?
我使用 webpack 让 Angular2 运行 PrimeNG。PrimeNG 依赖于 PrimeUI,它本身使用主题,并且其中一个(主题黑暗)缺少图像(无论如何它仅用于旧浏览器)。
但是现在当我使用 webpack 从中加载 css 文件时,它告诉我“找不到模块:错误:无法解析‘文件’或‘目录’......
我如何从外部控制 css 加载器或 sass 加载器(不确定最后谁处理它)应该忽略它?
谢谢!
sass - 使用 CSS 模块时,为什么在全局上下文中会失败?
核心.scss
WebPack 配置:
错误:
模块构建失败:CssSyntaxError: postcss-modules-local-by-default: src/styles/core.scss:1:0: Missing whitespace before :global :global {
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-plugin
css时不起作用bundle.js
index.html
<link href="blob:..." rel="stylesheet">
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,但仍然没有运气。我发现一个线程说降级节点版本,但这就是我想要做的。我想更新节点和所有节点模块。任何帮助表示赞赏。
node.js - 失踪 !导致“找不到模块” - webpack
我有使用 webpack 捆绑器的节点应用程序。每次我尝试捆绑它时,我都会收到此错误:
显然 node_modules 的路径错误存在问题,测试有 '!' 在它之前。这只发生在样式和 css 加载器上。webpack 是否有某种方式可以正确解释这种方式?
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 配置:
任何帮助将非常感激。
css - 用于在 Webpack 中启用热样式加载器以同步 css 的配置
我正在尝试在 Webpack 中启用热样式加载器,但我找不到合适的配置。这是我的 webpack.config.js:
还有我的 package.js 文件:
但无论我如何配置它,我都无法让热同步工作(对于 .css,对于 .js 文件,它工作得很好)!有人可以告诉我正确的方法吗?
reactjs - 为什么 webpack 在 boostrap css 之前输出本地 css?
我的应用程序使用引导 css 和本地自定义 css。问题是 webpack 的输出在 bootstrap css 之前包含了一些本地 css,并且在它之后包含了一些 css,尽管我的所有应用程序在引导后都导入了本地 css。有没有办法在引导 css 之后放置所有自定义 css?
[ webpack.config.js ]
[组件.js]
[部分.lcss]