cob*_*blr 5 javascript sass angular-cli
我正在使用：
我有一个新的Angular CLI项目，尽管main.bundle.js文件中显示了组件样式，也没有加载组件样式，并且没有抛出任何路径错误（不再）。
该angular-cli.json文件具有defaults.styleExt: "scss"和apps.styles: ["styles.scss","path/to/bootstrap.css"]。defaults.inline样式和模板均为假。
全局和Bootstrap样式正在加载，但组件中没有加载。
|- 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
@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%;
}
import {Component} from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './app-header.component.html',
styleUrls: ['./app-header.component.scss']
})
export class AppHeaderComponent {}
@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;
}
<!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错误，并且经过一番挖掘和挖掘之后，我得以摆脱了这些错误。我的webpack构建现在应该是“有效的”。
在我的angular-cli.json文件中，我将更defaults.styleExt改为scss，并且通过将styles.scss文件添加到来获得全局样式apps.styles。我的核心布局样式和Bootstrap样式现已应用于该应用程序。
我的问题是由于某种原因，我的组件样式没有被加载。就像我说的那样，它们在我运行后出现在main.bundle.js中ng build，并且我已经确认它们在运行时在chrome中加载的main.bundle.js中ng serve（不确定这些文件是否相同）因为我可以先运行ng serve而不必运行ng build）。看起来好像变量已由node-sass正确解析。
无效的事情：
在角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'。” 在建造时
我很惊讶这是如此复杂，我一定错过了一些愚蠢的东西。
就我而言，唯一的修复方法似乎是实际使用 Angular CLI 生成我的所有组件、服务和管道，并基本上以这种方式重建所有内容。
我首先生成了一个新项目，然后更新了我的angular-cli.json文件以使用 SCSS。从那里，我手动ng g <whatever>重建了所有内容（大约 20 个组件和 3 个服务）。我现在正在一一复制并粘贴所有自定义方法和有趣的内容，并在每一步之后验证事情是否正常。
这是一种痛苦，因为新文件似乎在其他方面都相同，但当我刚刚从非 CLI 生成的应用程序中添加组件和内容时，我的应用程序的 CLI 版本并不高兴。也许是目录结构？也许我只是用推土机推平了一些东西？我不知道。
我希望将来有人能够给出一个原因来解释为什么会发生这种情况。