Question

我努力在新鲜的角度项目中使用sass。我在CLI中使用--style=scss标志创建了项目，然后使用.angular-cli.json和"styleExt": "scss"更新了"styles": ["styles.scss"]文件内容。项目构建是成功的，但来自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。

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

现在一切正常，但我不明白这些scss文件是怎么回事。为什么我必须从@Component删除对它们的引用？（使用ng g component cli命令时会自动引用它们）。是否有其他选项可以在不引用.scss中的.angular-cli.json文件并使用@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

Answer 1

看起来你告诉NG CLI你想要使用SASS，但是你试图用它来scss文件。

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

ng new My_New_Project --style=scss

VS

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

Answer 2

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

在角项目中绑定scss文件的方法

2 个答案: