webstorm配置scss環(huán)境圖文教程

1.下載 Ruby  (安裝過(guò)程中記得勾選添加到環(huán)境變量，安裝結(jié)束最后可能會(huì)彈出一個(gè)cmd彈框，可以忽略)

2. cmd安裝sass

gem install sass

3. cmd檢查是否安裝

sass -v

重點(diǎn)是接下來(lái)

File>Setting>Tools>File Watchers ,點(diǎn)擊右上角加號(hào)選擇scss,出現(xiàn)以下界面

紅框標(biāo)示為解析器，每個(gè)人安裝目錄可能不一樣，但最后幾個(gè)目錄肯定是相同的。附C盤安裝默認(rèn)路徑   C:\Ruby24-x64\bin\scss.bat

綠框標(biāo)示為生成編譯文件的存放目錄，一般有兩種寫法，具體如下

1.    --no-cache --update $FileName$:$FileNameWithoutExtension$.css

2.    --no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css