在角度項目中綁定scss文件的方式

Question

我很努力地在新鮮的角度項目中使用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 

Answer 1

我解決了組件樣式問題，方法是卸載angular-cli並在1.4.7版本中重新安裝它。然後用--style=scss生成新項目。

Answer 2

它看起來像你告訴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