How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?

懵懂的女人 提交于 2019-12-02 15:51:13

The first part of your question is straightforward enough. Live reload only reloads the files you specify in the configuration; i.e if you specify sass files it is those that are reloaded. I fixed this in my setup by having Grunt watch the css file in my dist directory, which obviously gets changed every time the Sass is recompiled.

watch: {
  options: {
    livereload: true,
  },
  html: {
    files: ['index.html'],
  },
  js: {
    files: ['js/**/*.js'],
    tasks: ['jshint'],
  },
  sass: {
    options: {
      livereload: false
    },
    files: ['css/scss/**/*.scss'],
    tasks: ['sass'],
  },
  css: {
    files: ['dist/css/master.css'],
    tasks: []
  }
}

I'm not sure about the second question. It doesn't show those directories in my grunt watch --verbose for any project, then again I never run that command verbosely.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!