Chrome浏览器下调试SASS

网上说的方案各有各的说法，尝试多个才找到有效方案，为避免后来者麻烦，如今讲讲如何调试

 

笔者ruby版本为3.4.19，由于sass文件的编译是须要ruby环境的，使用sass前须要先安装！

 

第一步(核心)：在sass文件目录下，执行命令以下（笔者图方便，简单命名为a.scss）

                    sass --watch --scss --sourcemap a.scss:a.css

               

第二步：在Chrome浏览器中点按F12进入开发者工具点击设置按钮

第三步:在设置框中勾选“Enable CSS source maps” 便可

 

第四步:在项目中引用sass文件编译之后对应的css样式文件

                

第五步:在chrome浏览器中打开这个html页面（打开测试页面前必定要重凯Chrome，笔者被坑了屡次，就是由于没有关闭Chrome重开），细心的能够发现，chrome浏览器中加载出来的a.scss文件,这个文件就是本次调试的关键

               

 

第六步:在chrome浏览器中编辑a.scss

第七步:鼠标右键保存，ruby就会开始编译，看图以下：(切记scss文件中千万别出现中文，中文会致使ruby执行编译报错)，

                    

第八步:刷新chrome浏览器，就能够看到页面的样式变化了，

                    

第九步:浏览器中的css样式文件已经更新了

                     

第十步:而后查看本地的scss文件和css文件发现确实被更新了

                     

第十一步:这个过程基本就达到了在浏览器调试直接更新项目文件的要求了

 

优势：浏览器端的样式修改能直接和项目中的scss及css样式作到联动，减小重复劳动

 

缺点：若是sass命令的执行窗口关闭了，sass编译就直接中断了，因此必须保持命令窗口的状态

 

之因此分享这篇文章是发现网上的文章比较老，并且繁琐，为了不你们走些弯路，因此在这里作些详细说明

笔者讲的很细，有经验的童鞋能够跳跃阅读有用信息便可！