在 Angular 项目中绑定 scss 文件的方式答案

【问题标题】：Way of binding scss files in angular project在 Angular 项目中绑定 scss 文件的方式
【发布时间】：2017-10-18 04:27:48
【问题描述】：

我正在努力在新的 Angular 项目中使用 sass。我使用 CLI 中的 --style=scss 标志创建了项目，然后使用 "styleExt": "scss" 和 "styles": ["styles.scss"] 更新了 .angular-cli.json 文件内容。项目构建成功，但来自 xyz.component.scss 等文件的样式未编译，因此未包含在样式包中。

我设法将组件样式文件添加到 .angular-cli.json 文件 "styles": ["styles.scss", "./path/to/file/xyz.component.scss"] 但这导致运行时错误：Error: Uncaught (in promise): Expected 'styles' to be an array of strings。

为了避免这个错误，我从xyz.component.ts 文件中的@Component 注释中删除了styleUrls: ['./xyz.component.scss']。

现在一切正常，但我不明白这些 scss 文件发生了什么。为什么我必须从@Component 中删除对它们的引用？（使用ng g component cli 命令时会自动引用它们）。是否有任何其他选项可以使其在不引用 .angular-cli.json 中的 .scss 文件并使用 @Component 引用的情况下工作？

我的版本设置：

@angular/cli: 1.2.7
node: 6.10.0
os: win32 x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.7
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

【问题讨论】：

如果您从头开始打开一个新项目怎么办？ ng new my-proj --style=scss?这对你有用吗？
@GioraGuttsait 我也尝试使用该命令创建新项目，但结果相同。

标签： angular sass

【解决方案1】：

看起来你告诉 NG CLI 你想使用 SASS，但随后你试图向它提供 scss 文件。

如果您想编写 SCSS，请将您的标志更改为 SCSS。

ng new My_New_Project --style=scss

对

ng new My_New_Project --style=sass

此外，您只需要运行命令即可，无需更改任何其他配置或删除任何内容，尤其是在生成组件时。

ng generate component [name]

NG CLI 更新

全球

npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest

本地

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell npm install --save-dev @angular/cli@latest npm install

https://github.com/angular/angular-cli#updating-angular-cli

【讨论】：

哦，我的错，这是我的问题信息中的错字。我使用ng new test --style=scss 和ng new test 创建了项目，然后使用了ng set defaults.styleExt scss。在这两种情况下，结果都是相同的（如问题中所述）。
有趣，除非您从现有项目转换，否则您仍然不必ng set defaults.styleExt scss 或其他任何东西。您使用的是哪个版本的 ng cli？ ng --version
我知道在 Angular 项目中有两种使用 scss 的方法。这就是为什么我尝试使用 scss (ng new test --style=scss) 从头开始工作并通过 ng new test 创建新项目，然后将其转换为 scss (ng set defaults.styleExt scss)。在这两个项目中，结果都与问题描述中的相同。我的 cli 版本包含在问题描述以及其他组件版本 (@angular/cli: 1.2.7) 中。
对被追赶的事情感到抱歉。并不是说我认为这是您的问题，但可能值得更新到当前 1.3 的最新 CLI 版本。他们有大量的错误修复。添加更新信息以回答
还是什么都没有。我将 cli 更新到最新版本 1.4.7 并且仍然省略了 .scss 文件。

【解决方案2】：

我通过卸载angular-cli 并在1.4.7 版本中重新安装它解决了组件样式问题。然后使用--style=scss 生成新项目。

【讨论】：