webstrom配置scss編譯wxss並高亮

webstrom配置scss編譯wxss

1. 使用工具 webstrom工具（方式編寫樣式）

2. scss預編譯

3. 藉助 webstrom工具 配置scss (微信小程序(wxss)不能直接編譯scss, less語法)

4. 配置： less

   1. 全局安裝 npm install less -g
   2. 配置： 同scss步驟
   

5. 配置： scss

   參考： https://blog.csdn.net/qq_36370731/article/details/79514675
   1. 安裝 ruby 
   2. https://rubyinstaller.org/downloads/
   3. 在開始程序中找到Start Command Prompt with Ruby(window左下角)
   4. 輸入： gem install sass
   7. 檢查： sass -v
   8. 配置： 注意修改後綴
   9. 項目引入編譯後的wxss文件
   

6. 修改相關配置項

   1. Program: D:\files\ruby\Ruby25-x64\bin\scss.bat
   2. Arguments:  --no-cache --update -t commpressed $FileName$:$FileNameWithoutExtension$.wxss
   3. Output paths to refresh: $FileNameWithoutExtension$.wxss
   
   // -t commpressed 壓縮
   --no-cache --update -t commpressed $FileName$:$FileNameWithoutExtension$.wxss
   

詳細步驟

下載ruby

配置scss

壓縮樣式需配置： 替換 Arguments中值

--no-cache --update -t commpressed $FileName$:$FileNameWithoutExtension$.wxss

scss編譯後wxss

配置less

配置：wxss 在webstrom中 高亮

配置： wxml 在webstrom中 高亮