前期準(zhǔn)備：
首先你得有node環(huán)境，和一個(gè)已能手動(dòng)編譯scss的環(huán)境
- node 環(huán)境. (沒有安裝的同學(xué)戳這里 window 下安裝node.js http://blog.csdn.net/wx11408115/article/details/76609889
- SASS，SCSS環(huán)境搭建(node-sass) http://blog.csdn.net/wx11408115/article/details/78023466
- SASS，SCSS環(huán)境搭建(Ruby) http://blog.csdn.net/wx11408115/article/details/78019576
開始
-
在node-sass環(huán)境中，執(zhí)行
node-sass --watch <源文件> <目標(biāo)文件>
node-sass --watch src/input.scss dist/output.css
- 在ruby 環(huán)境中
sass --watch <源文件> <目標(biāo)文件>
(ps: 我用的是node-sass，所以這個(gè)我沒自測，以下都是以node-sass環(huán)境編譯的)
我們看看效果
這里寫圖片描述
注意:
在執(zhí)行命令：node-sass --watch src/input.scss dist/output.css 的時(shí)候，光標(biāo)應(yīng)該是一直在閃爍著，不要ctrl+c終止。
監(jiān)聽文件夾下所有文件
node-sass -w -r <源文件夾> -o <目標(biāo)文件夾> //它只會(huì)跟蹤同名文件，沒有則新建
-w, --watch Watch a directory or file //監(jiān)聽
-r, --recursive Recursively watch directories or files //遞歸地查看目錄或文件
-o, --output Output directory //輸出目錄
命令詳情見: https://www.npmjs.com/package/node-sass
它會(huì)在目標(biāo)文件夾下新建一個(gè)同名的css文件，然后關(guān)聯(lián)，這樣源文件夾下所有文件，都和目標(biāo)文件夾下所有相對應(yīng)的文件名的css關(guān)聯(lián)起來了，然后任意改動(dòng)源文件某個(gè)scss文件，相對應(yīng)的css也會(huì)改。
效果圖
這里寫圖片描述
小tips：用sublime 開雙視圖能更好的看到效果，具體設(shè)置View——>Layout——具體喜歡哪種選哪種
我的package.json
{
"name": "wifi",
"version": "1.0.0",
"description": "demo",
"main": "index.js",
"scripts": {
"sass": "node-sass"
},
"author": "WiFi_Uncle",
"license": "ISC",
"devDependencies": {
"node-sass": "^4.5.3"
}
}
