前期準(zhǔn)備:
首先你得有node環(huán)境症杏,和一個已能手動編譯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凭疮,所以這個我沒自測周拐,以下都是以node-sass環(huán)境編譯的)
我們看看效果
這里寫圖片描述
注意:
在執(zhí)行命令:node-sass --watch src/input.scss dist/output.css 的時候涡戳,光標(biāo)應(yīng)該是一直在閃爍著,不要ctrl+c終止或听。
監(jiān)聽文件夾下所有文件
node-sass -w -r <源文件夾> -o <目標(biāo)文件夾> //它只會跟蹤同名文件探孝,沒有則新建
-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
它會在目標(biāo)文件夾下新建一個同名的css文件,然后關(guān)聯(lián)誉裆,這樣源文件夾下所有文件顿颅,都和目標(biāo)文件夾下所有相對應(yīng)的文件名的css關(guān)聯(lián)起來了,然后任意改動源文件某個scss文件足丢,相對應(yīng)的css也會改粱腻。
效果圖
這里寫圖片描述
小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"
}
}