Question

我正在使用：

Angular v2.3.1
Angular CLI v1.0.0-beta.24
Node 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都是错误的。

正在加载Global和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

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教程开始了这个项目。我在测试和其他事情上遇到了麻烦，只是工作＆＃39;。在我的研究期间，我决定尝试使用Angular CLI，因为它应该包含一个功能正常的测试床，并希望有其他一些好处。

最初，我有很多关于模板和样式路径的JS错误，在一些digging和digging之后，我能够摆脱错误。我的webpack构建现在被认为是＆＃34;有效＆＃34;。

在我的angular-cli.json文件中，我将defaults.styleExt更新为scss，并且通过将styles.scss文件添加到{{1}，我能够获得全局样式}}。我的核心布局样式和Bootstrap样式现在正在应用于应用程序。

我的问题是由于某种原因，我的组件样式没有被加载。正如我所说，在我运行apps.styles之后，它们出现在main.bundle.js中，并且我已经确认它们位于main.bundle.js中，当我运行{{{ 1}}（不确定这些文件是否相同，因为我可以在没有先运行ng build的情况下运行ng serve。它看起来好像变量正由node-sass正确解析。

那些没有用的东西：

在angular-cli.json中，ng serve。它说在重建时无法解决路径。
在组件文件中，ng build。引发控制台错误＆＃34;未捕获错误：无法找到模块＆＃39;。＆＃39;在webpackMissingModule（main.bundle.js：1152）[]＆＃34;
在组件文件中，app.styles: ["app/**/*.scss"]，然后是styleUrls: [require('./app-header.component.scss')]。抛出＆＃34;找不到模块＆＃39; ./ app-header.component.scss＆＃39;。＆＃34;建设时

我很惊讶这是如此复杂，我必须错过一些愚蠢的事情。

Answer 1

晚会，但遇到了同样的事情。如果遇到这个帖子，那么就把它当作另一个选择。

一切都在呈现，风格如上所述，但实际上并没有显示出来。

在Shadow DOM Strategies找到了解决我问题的文章。

具体设置encapsulation: ViewEncapsulation.None制作的样式可以正确显示给定的组件。

Answer 2

您是否尝试将"app/**/*.scss"添加到apps.styles？

我在我的gruntfile中使用这样的东西将所有较少的文件连接到一个

Answer 3

在我看来，修复的唯一方法是实际使用Angular CLI生成我的所有组件，服务和管道，并基本上重建所有方法。

我首先生成了一个新项目，然后更新了我的angular-cli.json文件以使用SCSS。从那里，我手动执行ng g <whatever>来重建所有内容（大约20个组件和3个服务）。我现在一个接一个地复制和粘贴所有自定义方法和有趣的东西，并在每个步骤后验证一切正常。

这有点痛苦，因为新文件看起来都是相同的，但是当我刚刚从非CLI生成的应用程序中删除了组件和内容时，我的应用程序的CLI版本并不高兴。也许这是目录结构？也许我只是推土机？我不知道。

我希望将来有人能够说明为什么会发生这种情况。

祝你好运！

Answer 4

将我的角度应用程序从7更新到8后，我遇到了相同的行为。几个小时后，我确实找到了原因：我正在使用 BrowserModule.withServerTransition({appId: APP_ID})和我的APP_ID的结构类似于xx.xxx.xxxxx。从APP_ID中删除所有点后，它们又按预期工作了。

为什么angular cli不包括我的组件scss？