我是Angular的新手，我來自Ember社區。嘗試使用基于Ember-CLI的新Angular-CLI。我需要知道在新的Angular項目中處理SASS的最佳方法。我嘗試使用該存儲ember-cli-sass庫來查看它是否可以正常運行，因為Angular-CLI的許多核心組件都運行于Ember-CLI模塊。它沒有用，但是再不確定我是否配置錯誤。另外，在新的Angular項目中組織樣式的最佳方法是什么？最好將sass文件與組件放在同一文件夾中。
3 回答
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
當您使用angular cli創建項目時，請嘗試以下操作：
ng new My_New_Project --style=sass
這將生成帶有預定義sass文件的所有組件。
如果要使用scss語法，請使用以下命令創建項目：
ng new My_New_Project --style=scss
如果要更改項目中的現有樣式
ng set defaults.styleExt scss
Cli處理其余的工作。
對于最新版本
為了使Angular 6使用CLI在現有項目上設置新樣式：
ng config schematics.@schematics/angular:component.styleext scss
或直接進入angular.json：
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
回首憶惘然
TA貢獻1847條經驗 獲得超11個贊
更新Angular 6+
新項目
當生成一個新的項目與角CLI，指定CSS預處理器
使用SCSS語法
ng new sassy-project --style=scss
使用SASS語法
ng new sassy-project --style=sass
更新現有項目
通過運行在現有項目上設置默認樣式
使用SCSS語法
ng config schematics.@schematics/angular:component.styleext scss
使用SASS語法
ng config schematics.@schematics/angular:component.styleext sass
上面的命令將使用以下命令更新您的工作區文件（angular.json）
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
在哪里styleext可以是scss或sass根據選擇。
原始答案（針對Angular <6）
新項目
對于新項目，我們可以設置選項--style=sass或--style=scss根據所需的口味SASS / SCSS
使用SASS語法
ng new project --style=sass
使用SCSS語法
ng new project --style=scss
然后安裝node-sass，
npm install node-sass --save-dev
更新現有項目
要使用angular-cli來編譯sass文件node-sass，我必須運行，
npm install node-sass --save-dev
安裝node-sass。然后
用于SASS語法
ng set defaults.styleExt sass
用于SCSS語法
ng set defaults.styleExt scss
將默認的styleExt設置為sass
（要么）
改變styleExt到sass或scss為期望的語法中.angular-cli.json，
用于SASS語法
"defaults": {
"styleExt": "sass",
}
用于SCSS語法
"defaults": {
"styleExt": "scss",
}
盡管它生成了編譯器錯誤。
ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
@ multi styles
通過更改.angular-cli.json，
"styles": [
"styles.css"
],
要么
用于SASS語法
"styles": [
"styles.sass"
],
用于SCSS語法
"styles": [
"styles.scss"
],
- 3 回答
- 0 關注
- 699 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消