• home > webfront > style > sass >

    webstorm,PHPstorm,intelliJ idea之sass實時編譯詳解

    Author:[email protected] Date:

    最近開始用SASS,LESS等來寫CSS,jetbrain系列軟件中,它自帶一個File Watchers的plugin,設置一下,即可實時編譯SASS,LESS等。

    jetbrain公司出的軟件都很牛逼,是一個很牛叉的IDE,無論webstorm,還是phpstorm,還是intelliJ,

    最近開始用SASS,LESS等來寫CSS,jetbrain系列軟件中,它自帶一個File Watchers的plugin,設置一下,即可實時編譯SASS,LESS等。

    LESS的實時編譯很簡單,在node平臺安裝一下即可。

    而在折騰SASS的實時編譯時,花了我一點時間。因為按照網上的教程設置都不成功,最后自己把設置改來改去終于折騰好了。

    下面就是在WebStorm設置SASS的File Watchers的步驟:

    1. 安裝Ruby

    http://www.rubyinstaller.org/,去這里下載,然后安裝。

    2. 安裝Sass

    安裝好Ruby后,打開CMD命令,輸入:

    gem install sass
    

    注意:

    這里有可能安裝沒反應或提示網絡錯誤什么的。解決辦法是使用淘寶的Ruby gem鏡像:

    $ gem sources --remove https://rubygems.org/
    $ gem sources -a https://ruby.taobao.org/
    $ gem sources -l
    *** CURRENT SOURCES ***
    https://ruby.taobao.org
    # 請確保只有 ruby.taobao.org
    $ gem install sass
    

    3. 上面都安裝沒問題以后,就可以設置Webstorm或PHPStorm了

    • 3.1 打開Webstorm的設置界面,然后搜索File Watcher;

    • 3.2 點擊File Watchers界面的增加按鈕;

    • 3.3 然后設置界面如下:

    注意:

    • 如果你想用SCSS,并且Ruby是安裝在默認路徑下,那么”File Type:“和”Program:“那里的設置就和我一樣;

    • 如果是用SASS,那么你在新建時應該選擇SASS的類型,”Program:“也應該選”sass.bat“。


     

    ctrl + alt + s,打開'Settings'--'File Watchers',然后雙擊'SCSS':下面是默認的'SCSS File Watcher'

     

    修改下面兩個地方就可以一起生成'*.map'文件啦:

    'Arguments': --no-cache --update $FileName$:$FileNameWithoutExtension$.css

    修改后:

    'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css

    另一處:

    'Output paths to refresh': $FileNameWithoutExtension$.css

    修改后:

    'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

    OK,修改完保存,現在新建'style.scss'后就會自動生成'style.css'和'style.css.map'啦:

     

    如果,想把SCSS源文件與生成后的CSS和map文件分開目錄,則如下設置:

    'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css


    轉載本站文章《webstorm,PHPstorm,intelliJ idea之sass實時編譯詳解》,
    請注明出處:http://www.qsexmk.tw/html/webfront/style/sass/2015_0805_238.html

    彩票快乐双彩