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 | app.use(sassMiddleware({ |
然後將裡面的 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 | app.use(sassMiddleware({ |
需注意app.use(sassMiddleware({ ... }));
必須在app.use(express.static(...)));
之前,否則會無法編譯。