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

来源:3-12 Sass 的调试

comlejade

2015-11-11 11:21

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

写回答 关注

3回答

  • 慕小乔
    2016-11-21 14:44:33


    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
               }
                    }
           }


    weixin...

    这么繁琐吗,能行吗

    2019-08-26 12:28:28

    共 1 条回复 >

  • qq_守望回音_0
    2015-11-17 16:33:59
    $('.class').click(function(){
        alert(1)
    })


  • 1往事随风1
    2015-11-12 00:01:52

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

    一只会飞的猪 回复rehack...

    我也是,你最后怎么调试的?

    2016-08-24 21:34:53

    共 5 条回复 >

Sass入门篇

Sass入门视频教程,学会Sass使你摆脱重复编写代码的工作

104421 学习 · 263 问题

查看课程

相似问题