美文网首页
SublimeText 3 配置SASS保存自动编译和保存位置

SublimeText 3 配置SASS保存自动编译和保存位置

作者: BETOMElo | 来源:发表于2018-11-05 12:32 被阅读0次

    1.之前按着很多教程基本都是需要先安装SASS和SASS Build插件,但是这两个插件每次保存scss文件后还要手动ctrl+b,效率太差!!
    偶然间发现一个很牛叉的插件“SublimeOnSaveBuild”,这个插件会监听你保存信息,每次保存就会选择该类型文件的编译系统自动编译,省去了scss还要再ctrl+b的繁琐操作。
    2.保存位置,自动编译后生成2个文件,一个css,一个map但实际上map很多时候不需要,按需就取吧,反正我是不需要。所以得想办法搞掉它,并且要把css文件生成到单独的css文件夹里,所以还是得自己新建编译系统。百度还是强大的。步骤:
    1):工具--》编译系统--》新建编译系统
    2):复制以下代码:

    {
        "cmd": ["sass", "--update",
         "${file_path}/${file_name}:${file_path/scss/css/}/${file_name/scss/css/}"
        , "--no-cache", "--style", "compressed", "--sourcemap=none"],  
        "selector": "*.scss",
        "line_regex": "Line ([0-9]+):",  
    
        "osx":  
        {  
            "path": "/usr/local/bin:$PATH"  
        },  
    
        "windows":  
        {  
            "shell": "true"  
        }  
    }
    

    3):保存,不要修改后缀名,文件名自己起,比如:toCss。
    4):编辑scss文件,选择编译系统(刚才自己新建的编译系统),ctrl+s保存,大功告成。
    这段代码功能就是将生成的css文件放在css文件夹里,没有的话就新建一个。并且不生成map文件。
    3.但实际使用起来会发现,坑爹的插件不仅编译sass,还连带js、css都给自动编译了,这哪行,我js里加点注释就保存不了了喔日,解决办法:首选项--》packing setting--》SublimeOnSaveBuild--》setting-Default复制所有代码再关掉。然后:首选项--》packing setting--》SublimeOnSaveBuild--》setting-User 粘贴刚才的代码,把第二行过滤器后面的js等等都删掉。只留Sass相关,我是这样的:

    {
        "filename_filter": "\\.(sass|less|scss)$",
        "build_on_save": 1
    }
    

    5):ok,大功告成,愉快的写代码把。

    相关文章

      网友评论

          本文标题:SublimeText 3 配置SASS保存自动编译和保存位置

          本文链接:https://www.haomeiwen.com/subject/ojfsxqtx.html