不同css在angular 可以混用嗎，一些套件安裝需要你改成scss，像是:
https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design
但不太可能所有套件都是用scss，這樣實作之後會有問題嗎
in angular-cli.json change:
"styleExt": "css" to "styleExt": "scss"
rename /src/styles.css to styles.scss
if you want to change styles in exisiting project you can use ng set defaults.styleExt scss
add below lines to angular-cli.json:
"styles": [
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"node_modules/angular-bootstrap-md/scss/mdb-free.scss",
"src/styles.scss"
],
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/hammerjs/hammer.min.js"
],
已邀請的邦友 {{ invite_list.length }}/5
scss & css 是可以混用的，但盡量用scss來切割你的css，不要讓頁面的css互相影響。
切割的意思是?
把css做一個分類。
舉例：
如果有一些共用的css，那我在一個scss檔中定義好(basic.scss)。
接著，我在app.scss檔中將basic.scss import。
代碼大致如下：
app-test,
{
@import'./basic.scss';
}
那我可以很確定這些basic.scss中的css原素就只會在app-test這個selector中被套用進來，我也不用怕會不會有重複名稱的css被overwrite。
不知道這個例子有沒有幫到你，當然一般在用不會那麼單純，不過大概是這樣的概念。
有喔感謝大大，overwrite的問題，有在想，但不知道該怎麼切，暫時只對class命名避免重複，這名稱會搞得滿長，請問app-test指的是?就是某個要作用的selector (class,id,body ..)?
我是用component中命名的selector舉例，因為我覺得用這個去做切割較直覺。當然你也可以用class、body之類的當成你切割的依據，看個人。
所以大大會在app-test component的html最外層多綁定app-test這個標籤?還是<app-test></app-test>用app-test{}就會有作用?
同意aa71435723大大的論點
SCCS的架構蠻重要的，可以參考這一篇https://ithelp.ithome.com.tw/articles/10202786
感謝Peterhu2Tri同意我。
是綁定標籤，不過不用特別多綁定什麼，就根據你的需求。
如上面的例子：
我今天想要我的basic.scss只被<app-test>這一個coomponent裡用到，而basic.scss裡面有一個css叫highlight好了。
那假如我別的地方也有定義highlight這一個css，且是針對整個專案，但因為我的寫法
app-test,
{
@import'./basic.scss';
}
所以我的app-test這一個component就會吃到basic.scss中的highlight，而不是其他地方的highlight。
所以你的style.scss應該類似這樣。
.highlight{
color:red;
}
app-test{
@import'./basic.scss';
}
感謝兩位大大，意思就是作用在<app-test></app-test>整個component裡面。
iThome鐵人賽
看影片追技術