• 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实时编译详解》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/style/sass/2015_0805_238.html