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，尋找以下這段

1
2
3
4
5
6

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'))); 在這段之前貼入以下程式碼即可。

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
}));

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