iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
1
Software Development

三十天利用Angular與.net Core開發實戰一波系列 第 4

Day 4 AngularTri專案架構配置- SCSS style配置

SCSS

Angular預設的風格配置為.ccs檔,這邊跟大家分享一下我會使用.scss檔去維護共同風格

來避免相同的CSS語法再多寫一次,導致重工

如果是新建立一個專案的話

ng g c new-project --style=scss

或是直接手動修改

  • 首先第一步先把style.css手動修改為style.sccs
    https://ithelp.ithome.com.tw/upload/images/20181019/20105684pq1P5V7GDq.png
    因為改了副檔名,所以angular.json裡面的config也要修改

  • 找到angular.json裡面所有"style"裡的style.css修改為style.scss

angular.json
"styles": [
 "src/styles.scss"
 ]
  • 接下來在/src/app裡面新建一個programs-style的folder
    裡面在建一個basic.scss,每個program都會用的css就放在裡面
    https://ithelp.ithome.com.tw/upload/images/20181020/20105684xncgkwLIuM.png
    ex:表格每一欄的hover動畫與Angular Material Card元件的共同大小
basic.scss
.standard-closed {
  text-align: right; 
}

.standard-width {
  margin: 8px;
}
tr:hover {
  background-color: rgba(255, 0, 0, 0.2); 
}

.mat-card {
  width: 25%;
  display: inline-grid;
  margin: 20px;
}
  • 之後就請在原本最外層的style.scss裡面添加各component的selector
style.scss
app-tri001,
app-tri002 {
  @import './app/programs-style/basic.scss';
}

這樣angular程式在啟動時就會透過style.scss去編譯
這樣編譯出來的型態可以在瀏覽器中的開發者模式看到
https://ithelp.ithome.com.tw/upload/images/20181019/20105684tKg0iRdkYY.png
藉由這樣的編排
大可將每個component中的.css檔移在programs-style folder裡面
https://ithelp.ithome.com.tw/upload/images/20181020/20105684EGMX7vhKZF.png
這樣就可以除了共用的css(basic.scss)以及這支tri001component專用的css寫在這裡面

style.scss
app-tri001,
app-tri002 {
  @import './app/programs-style/basic.scss';
}
app-tri001 {
  @import './app/programs-style/tri001.component.scss';
}

這樣將css風格都統一收納管理在programs-style folder裡面

也可額外新增別人寫好的一包css file

最後再藉由style.scss管理哪個component要使用那些css囉


上一篇
Day 3 AngularTri專案架構配置-component & service & routing
下一篇
Day 5 AngularTri專案架構配置-Angular Material
系列文
三十天利用Angular與.net Core開發實戰一波32

尚未有邦友留言

立即登入留言