windows下安裝Sass編譯環(huán)境

由于Sass是基于Ruby語言開發(fā)的，所以首先要安裝Ruby

Ruby環(huán)境安裝

  1. 外網(wǎng)下載地址：https://rubyinstaller.org/downloads/ ，如無翻墻，可網(wǎng)盤自?。烘溄?https://pan.baidu.com/s/1mNAp-qze13yWfTN55QVwDQ 提取碼:7b4o
  2. 下載 rubyinstaller 之后，解壓到新創(chuàng)建的目錄下：
  3. 雙擊 rubyinstaller-2.2.3.exe 文件，啟動(dòng) Ruby 安裝向?qū)А?/li>
  4. 點(diǎn)擊 Next，繼續(xù)向?qū)?，記得勾選 Add Ruby executables to your PATH，直到 Ruby 安裝程序完成 Ruby 安裝為止。

安裝后執(zhí)行以下代碼可查看版本號(hào)

ruby -v

由于國(guó)內(nèi)網(wǎng)絡(luò)原gem源連接不穩(wěn)定，所以移除原gem源，添加國(guó)內(nèi)源：

// 移除gem源
gem sources --remove https://rubygems.org/
// 添加國(guó)內(nèi)源
gem sources -a https://gems.ruby-china.com

安裝Sass

gem install sass

IDEA設(shè)置Sass編譯

  1. 在Plugins組件中搜索file watchers，如果沒有就點(diǎn)擊下面按鈕“Install JetBrains plugins”，搜索“file watchers”安裝并重啟idea。


    image.png

  2. 在Tools中，找到file watchers,配置scss編譯


    image.png

program：看你ruby安裝在哪個(gè)盤，找到ruby文件夾，\bin\sass.bit(sass依賴于ruby，所以必須先安裝ruby，然后在cmd中查看ruby是否安裝成功，ruby -v，安裝成功后，安裝sass，指令是 gem install sass，之后會(huì)顯示sass安裝成功)

arguments：--no-cache --update FileName:FileParentDir\css$FileNameWithoutExtension.css（FileParentDir--sass文件所在文件夾的上級(jí)文件夾，FileParentDir(sass)$ -- sass文件所在的文件夾）

output paths to refresh：FileNameWithoutExtension.css（只輸出css文件）

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容