为什么我更改sass样式不能立即在浏览器中看到变化
每次都要crtl+s保存,然后再刷新页面才能看到变化
每次都要crtl+s保存,然后再刷新页面才能看到变化
2015-11-11
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
}
}
}
举报