用node-sass來轉(zhuǎn)譯scss文件
sass是來之ruby社區(qū)的谁鳍。 所以想要用 sass 需要安裝ruby。 但是我不做 ruby的開發(fā), 不想要安裝 ruby 女阀。
解決辦法:
Nodejs 的 node-sass 就是來做這樣的事的契吉。
安裝 之前需要 配置一下 源 跳仿。不然 npm i node-sass
的時(shí)候 會報(bào)錯(cuò) :
配置: 在你的 bash配置中(~/.bashrc 或 ~/.zshrc) 添加
export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"
這樣 就會用淘寶的源安裝 node-sass
項(xiàng)目中 安裝 node-sass
npm init -y
npm i -D node-sass
然后再package.json
中 配置script
來運(yùn)行 node-sass ,
也可以直接 使用 npx node-sass ...
在全局安裝 node-sass 錯(cuò)誤解決
mac os 系統(tǒng)下需要加
sudo
sudo npm i -D node-sass -g
此時(shí) 報(bào)了錯(cuò)誤, 大意還是說 權(quán)限不夠, 然后到去 找 解決方法: 在百度搜了一大圈發(fā)現(xiàn) 全是教配置 淘寶源的, 沒有我想要. 只能去google了, 到了 github上 找到node-sass 夏目的 指導(dǎo)頁面github, 全是英文, 硬著頭皮看吧, 終于讓我找到了.
意思是說:
如果 你用的是linux 或者 macos系統(tǒng) , 全局安裝node-sass
就算你使用 sudo , 但還是會有一個(gè)npm的安全功能給阻止, (您應(yīng)該始終避免運(yùn)行npm
捐晶,sudo
因?yàn)榘惭b腳本可能是無意的惡意)但是 如果你必須要用 的話 需要使用 --unsafe-perm
來解決報(bào)錯(cuò):
$ sudo npm install --unsafe-perm -g node-sass
這樣就可以 直接 node-sass 來在所有項(xiàng)目中使用了.
用法:
node-sass src/style.scss dist/style.css
參數(shù)
-w
監(jiān)聽文件改動(dòng)-
--output-style
指定代碼編譯風(fēng)格* nested:嵌套縮進(jìn)的css代碼菲语,它是默認(rèn)值妄辩。 * expanded:沒有縮進(jìn)的、擴(kuò)展的css代碼山上。 (最直觀的) * compact:簡潔格式的css代碼眼耀。 (一行一個(gè)) * compressed:壓縮后的css代碼。 (只有一行) # 生產(chǎn)環(huán)境當(dāng)中佩憾,一般使用最后一個(gè)選項(xiàng)哮伟。