带有 angular-cli 的 Angular2 项目未加载 css 文件答案

【问题标题】：Angular2 project with angular-cli is not loading css files带有 angular-cli 的 Angular2 项目未加载 css 文件
【发布时间】：2017-05-30 17:42:24
【问题描述】：

您好，我正在使用带有 angular-cli、angular2-material、angular2-firebase 的 angular2 项目，angular2-material 库工作正常，但我注意到 css 例如如果您在组件级别声明 css 或在 style.css 的 src 级别上，当您检查页面上的元素时，浏览器不会获取类，即使您在 index.html 上调用 css 也不起作用，唯一有效的是主题。 scss 在 angular-cli.json 中声明，但没有其他样式，这是我正在使用的版本。

npm: '4.0.5',
node version v7.4.0

angular-cli: 1.0.0-beta.25.5
node: 7.4.0
os: win32 x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/flex-layout: 2.0.0-beta.1
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/compiler-cli: 2.4.3

【问题讨论】：

你能给个minimal reproducible example吗？这可能与样式封装有关，但是您的描述非常模糊。
很可能是路径问题。如果没有更多信息，很难提供帮助。例如显示调用css文件的代码以及带有目录的项目结构。
我什么都没做，这是我在 app.component.css 中唯一做的事情，这个项目是全新的，只需安装 angular-cli、material、firebase 并添加一些两个 css 类.wrap{ 边距：0 自动；背景颜色：黑色； } .wrapmenu{ 弹性：1； }
今天早上做了同样的事情，我收到 css-loader 错误 - 找不到模块。我可以理解它没有找到一些 css 模块，但是为什么呢？ angular-cli.json 没有改变。

标签： angular angular-cli

【解决方案1】：

要使用 webpack 加载 css 样式，您应该将 'style-loader' 和 'css-loader' 插件添加到 webpack，然后 webpack 会自动找到并通过将它们导入到您的组件中将它们注入您的页面，例如您可以添加它这样做到 appComponent.ts：

import '../assets/styles.css'

要使用 angular cli 命令将 webpack 配置添加到您的项目中，您应该运行以下命令：

ng eject

【讨论】：