webstorm sass編譯方法有哪些

這篇文章主要介紹“webstorm sass編譯方法有哪些”，在日常操作中，相信很多人在webstorm sass編譯方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”webstorm sass編譯方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

webstorm下的sass編譯問題

saas 需要運行在 ruby 環境，所以需要安裝 ruby 32 / 64

1、安裝 ruby

2、DOS命令中，測試ruby是否安裝：ruby -v （回車，出現版本號則是ruby安裝成功）

3、安裝sass命令： gem install sass

4、測試sass是否安裝成功：sass -v（回車，出現版本號則是sass安裝成功）

方法一：DOS命令sass轉化問css文件監聽

1、在 文件目錄中 ，打開 dos命令行的方法  :shift + 右擊

2、在命令行中輸入 sass命令，可以把sass文件 編譯為css文件

sass style.scss mystyle.css
sass style.scss ../css/mystyle.css

監聽編譯：在sass 修改時，會同步修改css文件

sass --watch style.scss:../css/mystyle.css

3、退出監聽  ctrl + c ，選擇 y

方法二：webstorm自帶監聽

1、一勞永逸：配置IDE 環境：

IDE 配置 （位置：setting --> Tools --> File watchers）

如果sass和css是兩個文件夾分別存放scss和css：

Arguments：--style expanded --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

中文編譯報錯：【不能使用任何帶中文的文件名和備注】 找到文件

1、 lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\importers\filesystem.rb的87行

if name.index(@root + "/") == 0 修改為 if name.encode("utf-8",'gbk').index(@root + "/") == 0

2、在.scss文件中的頭部加上下面這句話 @charset “UTF-8”

到此，關于“webstorm sass編譯方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！