Nodejs-Express中撰寫SCSS

發表於 2019-04-25 分類於 Nodejs

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

最近正在學習 Nodejs-Express 開發，礙於自己本身所學習是 SCSS 預處理器，可是網路上好像找不到相關解決方式，所以這邊紀錄一下...

前言

最近正在學習 Nodejs-Express 開發，礙於自己本身所學習是 SCSS 預處理器，可是網路上好像找不到相關解決方式，所以這邊紀錄一下…

未建立 Express

首先要使用 Express 就必須在全域下安裝，開啟 CMD 模式輸入以下指令

1	npm install express -g

安裝完畢後移動到指定資料夾

1	cd ...資料夾目錄

接下來輸入 Express 指令產生 Express。

–view 代表要使用的解析模板(包含 pug、 ejs 等)
–css 要使用什麼 CSS 處理方式

因為我習慣使用 pug 做開發，然後要使用sass來做css預處理。
※不要打 –css=scss ，這樣是沒有效果滴

1	express --view=pug --css=sass

接下來安裝 Express 所需要的相關套件

1	npm install

安裝完畢後進入 app.js，尋找以下這段

app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: true,
  sourceMap: true
}));

然後將裡面的 indentedSyntax修改為 false 即可撰寫SCSS

false 代表 SCSS
true 代表 SASS

已經建立 Express

若是已經建立 Express ，那就要另外安裝套件

首先必須安裝 node-sass-middleware

1	npm install --save node-sass-middleware

安裝完畢後開啟 app.js 將以下程式碼貼入

1	var sassMiddleware = require('node-sass-middleware');

然後尋找 app.use(express.static(path.join(__dirname, 'public'))); 在這段之前貼入以下程式碼即可。

app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: false, // true = .sass and false = .scss
  sourceMap: true
}));

需注意app.use(sassMiddleware({ ... }));必須在app.use(express.static(...)));之前，否則會無法編譯。