Express自訂SASS/SCSS路徑

前言

前面有撰寫一篇如何Nodejs-Express中撰寫SCSS,剛寫完就遇到一個問題…
所以這邊果斷再寫一篇該如何自訂 SASS/SCSS 路徑

編譯 SASS/SCSS 原理

首先必須瞭解 Express 編譯原理才能夠明白該如何做自定義 scss 路徑。

以下為使用pug作為範例。

瀏覽器跟 Nodejs 請求 index 樣式,而 index 中的 header 樣式路徑是寫 link(rel='stylesheet', href='/stylesheets/all.css'),所以Nodejs接收到之後就去執行以下這段

1
2
3
4
5
6
app.use(sassMiddleware({
src: path.join(__dirname, 'public'), // 要執行編譯的資料夾
dest: path.join(__dirname, 'public'), // 編譯完畢要放置的資料夾路徑
indentedSyntax: false, // true = .sass and false = .scss
sourceMap: true,
}));

所以執行編譯時 Nodejs 就依照 link 路徑去找 /stylesheets/ 底下的 SCSS,然後在 stylesheets 底下編譯完成。

這樣講有點難懂,這邊替 sassMiddleware 多增加一個參數 debug:true

debug 這個可以幫助我們了解 SASS/SCSS 編譯時的狀況。

1
2
3
4
5
6
7
app.use(sassMiddleware({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public'),
indentedSyntax: false, // true = .sass and false = .scss
sourceMap: true,
debug: true,
}));

接下來再透過瀏覽器跟 Nodejs 請求樣式,此時會看到終端機出現這樣子的路徑。

但是如果我們要自定義路徑SCSS編譯路徑呢?首先先試著將 src 改成 scss,因為我 scss 並不打算放在pubilc中。

此時再跟瀏覽器重新整理請求一次樣式路徑。

可以看到確實不是從 public 去找了,而是改 scss,但是路徑後面卻多了 stylesheets,所以這邊要再加入一段語法 prefix: '/stylesheets' 路徑前贅詞。

1
2
3
4
5
6
7
8
app.use(sassMiddleware({
src: path.join(__dirname, 'scss'),
dest: path.join(__dirname, 'public'),
prefix: '/stylesheets',
indentedSyntax: false, // true = .sass and false = .scss
sourceMap: true,
debug: true,
}));

這時候再跟瀏覽器請求一次樣式。

可以看到路徑沒有 stylesheets 了,所以從結果來看,如果要將 stylesheets 改成 css,那就要修改幾個地方。

  • layout 中的 header link:css > link(rel='stylesheet', href='/css/all.css')
  • dest 也必須修改 > dest: path.join(__dirname, 'public/css'), 若不寫上/css,他會在public上生成CSS檔案這需注意。
  • app.js 中 prefix > prefix: '/css'
0%