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(...)));之前,否則會無法編譯。

0%