为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我更改sass样式不能立即在浏览器中看到变化

每次都要crtl+s保存,然后再刷新页面才能看到变化

正在回答

3 回答


1.在 chrome://flags/ 中启用 Developer Tools Experiments (开发者工具实验)
2.在 Developer tools 设置 Experiments 选项下开启File system folders in Sources Panel,再重启Developer tools,就会多出Workspace选项。
3.在Workspace中把你的资源目录添加到File systems即可,如果CSS,JS链的是URL可以使用Mappings来设置路由(注意:结尾千万不要加上\,他逻辑只判断了是否以/结尾,否则就会变成path\/,略坑啊~~)

4. 需要安装2个插接件:grunt-contrib-watch、connect-livereload
⑴执行命令:npm install --save-dev grunt-contrib-watch connect-livereload
⑵. 安装浏览器插件:Chrome LiveReload
⑶. 配置一个Web服务器(IIS/Apache),LiveReload需要在本地服务器环境下运行(对file:///文件路径支持并不是很好),需要127.0.0.1:8080这种的。
⑷. 修改Gruntfile.js文件:


watch: {
           css: {
               files: '**/*.scss',
               tasks: ['sass'],
               options: {
         livereload: true
           }
                }
       }


0 回复 有任何疑惑可以回复我~
#1

weixin_慕神6223369

这么繁琐吗,能行吗
2019-08-26 回复 有任何疑惑可以回复我~
$('.class').click(function(){
    alert(1)
})


0 回复 有任何疑惑可以回复我~

更改完样式,在命令行中添加watch代码,使得编译代码更新

2 回复 有任何疑惑可以回复我~
#1

comlejade 提问者

我用的考拉koala。。。。
2015-11-12 回复 有任何疑惑可以回复我~
#2

comlejade 提问者

哦,忘了说了,我是说直接在谷歌中调试的时候,更改sass不能直接看到变化,要先保存再刷新网页,好麻烦的说
2015-11-12 回复 有任何疑惑可以回复我~
#3

rehack_cn 回复 comlejade 提问者

我的新版chrome浏览器修改了scss之后保存不了,调试好麻烦
2016-05-19 回复 有任何疑惑可以回复我~
#4

我是一块砖 回复 rehack_cn

在调试器里选择设置,然后在workplace里面添加你的工作目录,同意后浏览器就获得了权限,就可以保存了
2016-06-01 回复 有任何疑惑可以回复我~
#5

一只会飞的猪 回复 rehack_cn

我也是,你最后怎么调试的?
2016-08-24 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消

为什么我更改sass样式不能立即在浏览器中看到变化

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信