iT邦幫忙

0

angular scss css less 混用

Zaku 2018-08-31 13:32:321558 瀏覽

不同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"
],

1 個回答

1
aa71435723
iT邦新手 5 級 ‧ 2018-10-24 00:39:01
最佳解答

scss & css 是可以混用的,但盡量用scss來切割你的css,不要讓頁面的css互相影響。

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 4 級 ‧ 2018-10-24 10:49:00 檢舉

切割的意思是?

把css做一個分類。
舉例:
如果有一些共用的css,那我在一個scss檔中定義好(basic.scss)。
接著,我在app.scss檔中將basic.scss import。
代碼大致如下:

app-test,
 {
  @import'./basic.scss';
}

那我可以很確定這些basic.scss中的css原素就只會在app-test這個selector中被套用進來,我也不用怕會不會有重複名稱的css被overwrite。

不知道這個例子有沒有幫到你,當然一般在用不會那麼單純,不過大概是這樣的概念。

Zaku iT邦新手 4 級 ‧ 2018-10-24 13:51:09 檢舉

有喔感謝大大,overwrite的問題,有在想,但不知道該怎麼切,暫時只對class命名避免重複,這名稱會搞得滿長,請問app-test指的是?就是某個要作用的selector (class,id,body ..)?

我是用component中命名的selector舉例,因為我覺得用這個去做切割較直覺。當然你也可以用class、body之類的當成你切割的依據,看個人。

Zaku iT邦新手 4 級 ‧ 2018-10-25 09:27:20 檢舉

所以大大會在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';
}
Zaku iT邦新手 4 級 ‧ 2018-10-25 13:40:26 檢舉

感謝兩位大大,意思就是作用在<app-test></app-test>整個component裡面。

我要發表回答

立即登入回答