【发布时间】：2017-05-19 03:54:34
【问题描述】：
我正在使用：
- Angular v2.3.1
- Angular CLI v1.0.0-beta.24
- 节点 v6.9.2
- Node-sass v4.1.1
我有一个新的 Angular CLI 项目，它不加载组件样式，尽管它们显示在 main.bundle.js 文件中并且没有抛出路径错误（不再）。
angular-cli.json 文件有 defaults.styleExt: "scss" 和 apps.styles: ["styles.scss","path/to/bootstrap.css"]。 defaults.inline for style 和 template 都是假的。
正在加载全局和引导样式，但未从组件加载任何样式。
目录结构
|- src
|- index.html
|- styles.scss
|- scss
|- _colors.scss
|- _modals.scss
|- _overrides.scss
|- _utils.scss
|- app
|- components
|- app-header
|- app-header.component.ts
|- app-header.component.html
|- app-header.component.scss
|- pages
|- app-routing.module.ts
|- app.component.ts
|- app.module.ts
styles.scss
@import './scss/_colors';
@import './scss/_overrides';
@import './scss/_utils';
@import './scss/_modals';
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', 'Helvetica', sans-serif;
}
app-root {
display: table;
width: 100%;
height: 100%;
}
app-header.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './app-header.component.html',
styleUrls: ['./app-header.component.scss']
})
export class AppHeaderComponent {}
app-header.component.scss
@import '../../../../scss/_colors';
:host {
display: table-row;
height: 1px;
background: #FFF;
}
.header-stripe {
width: 100%;
height: 3px;
background: $AMARANTH;
}
.header-content {
padding: 5px 20px;
width: 100%;
position: relative;
border-bottom: solid 1px $ALTO;
}
index.html
<!doctype html>
<html>
<head>
<base href="./">
<title>Test CLI App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" />
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
一些上下文...
我使用 Angular2 Heroes 教程开始了这个项目。我无法让测试和其他事情“正常工作”。在我的研究过程中，我决定尝试使用 Angular CLI，因为它应该包括一个正常运行的测试平台，并希望有其他一些好处。
最初，我的模板和样式路径有很多 JS 错误，经过一些digging 和digging，我能够摆脱这些错误。我的 webpack 构建现在应该是“有效的”。
在我的angular-cli.json 文件中，我将defaults.styleExt 更新为scss，并且我能够通过将我的styles.scss 文件添加到apps.styles 来包含全局样式。我的核心布局样式和 Bootstrap 样式现在正在应用到应用程序中。
我的问题是，由于某种原因，我的组件样式没有被加载。正如我所说，它们在我运行ng build 后出现在main.bundle.js 中，并且我已经确认它们在我运行ng serve 时在chrome 中加载的main.bundle.js 中（不确定如果这些文件相同，因为我可以运行ng serve 而无需先运行ng build）。看起来好像 node-sass 正在正确解析变量。
没用的东西：
在 angular-cli.json 中，
app.styles: ["app/**/*.scss"]。它说在重建时无法解析路径。在组件文件中，
styleUrls: [require('./app-header.component.scss')]。引发控制台错误“未捕获的错误：找不到模块”。在 webpackMissingModule (main.bundle.js:1152) []"在组件文件中，
import componentStyles from './app-header.component.scss'，然后是styles: [componentStyles]。抛出“找不到模块'./app-header.component.scss'。”建设时
我很惊讶这如此复杂，我一定错过了一些愚蠢的东西。
【问题讨论】：
标签： javascript sass angular-cli