2019

Sass 與 WordPress

使用SCSS修改樣式

首先是用NPM安裝node-sass，再撰寫腳本指定覆蓋原本的style.css

../package.json

1
2
3
4
"scripts": {
    "scss": "node-sass wordpress/wp-content/themes/sydney/scss/main.scss wordpress/wp-content/themes/sydney/style.css -w",
    
},

將原本的style.css改名為 _styleWP.scss，利用main.scss匯入後，再利用css權重去加入客製化樣式，如此一來就可以在舊有樣式上進行修改。

./scss/main.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@import "abstracts/mixin";
@import "abstracts/variables";
@import "abstracts/utility";

@import "base/base";
@import "base/styleWP";
@import "base/typography";

@import "components/archives";
@import "components/article";
@import "components/button";
@import "components/categories";
@import "components/navbar";
@import "components/search";
@import "components/footer";

@import "layout/home";
閱讀全文