问题标签 [css-loader]

我现在正在玩 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 还是我找到的任何多个加载器。装载机确实人满为患，因为每次我查看示例时，我都会找到另一个装载机；）

我正在使用 react starter kit，我正在尝试从 bootstrap（通过 NPM 安装）导入 SCSS 文件，它抱怨评论：

这是 app.js 中的导入

然后通过 webpack 加载器：

有人知道为什么吗？

谢谢

詹姆士

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

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

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

谢谢！

核心.scss

WebPack 配置：

错误：

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

我将 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">

我将 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，但仍然没有运气。我发现一个线程说降级节点版本，但这就是我想要做的。我想更新节点和所有节点模块。任何帮助表示赞赏。

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

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

无论当前的应用程序 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 配置：

任何帮助将非常感激。

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

还有我的 package.js 文件：

但无论我如何配置它，我都无法让热同步工作（对于 .css，对于 .js 文件，它工作得很好）！有人可以告诉我正确的方法吗？

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

[ webpack.config.js ]

[组件.js]

[部分.lcss]