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'