用node-sass來轉(zhuǎn)譯scss文件

sass是來之ruby社區(qū)的。 所以想要用 sass 需要安裝ruby。 但是我不做 ruby的開發(fā)， 不想要安裝 ruby 。

解決辦法：

Nodejs 的 node-sass 就是來做這樣的事的。

安裝 之前需要 配置一下 源 。不然 npm i node-sass的時候 會報(bào)錯 ：

配置： 在你的 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 錯誤解決

mac os 系統(tǒng)下需要加 sudo

sudo npm i -D node-sass -g

此時 報(bào)了錯誤, 大意還是說 權(quán)限不夠, 然后到去 找 解決方法: 在百度搜了一大圈發(fā)現(xiàn) 全是教配置 淘寶源的, 沒有我想要. 只能去google了, 到了 github上 找到node-sass 夏目的 指導(dǎo)頁面github, 全是英文, 硬著頭皮看吧, 終于讓我找到了.

意思是說:

如果 你用的是linux 或者 macos系統(tǒng) , 全局安裝node-sass就算你使用 sudo , 但還是會有一個npm的安全功能給阻止, (您應(yīng)該始終避免運(yùn)行npm，sudo因?yàn)榘惭b腳本可能是無意的惡意)但是 如果你必須要用 的話 需要使用 --unsafe-perm 來解決報(bào)錯:

$ sudo npm install --unsafe-perm -g node-sass

這樣就可以 直接 node-sass 來在所有項(xiàng)目中使用了.

用法：

node-sass src/style.scss dist/style.css

參數(shù)

• -w 監(jiān)聽文件改動

• --output-style 指定代碼編譯風(fēng)格

  • * nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
    
    * expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼。 (最直觀的)
    
    * compact：簡潔格式的css代碼。 (一行一個)
    
    * compressed：壓縮后的css代碼。 (只有一行)
    
    # 生產(chǎn)環(huán)境當(dāng)中，一般使用最后一個選項(xiàng)。