javascript - gruntjs 不能在 sass 上正常运行

Question

现在已经调试了几个小时..

livereload 在我保存我的 .html 文件时有效，但对我的 .scss 无效，我在下面的配置中做错了吗？ Chrome 的终端和控制台没有错误显示。

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            sass: {
                files: ['components/sass/*.{scss,sass}'],
                tasks: ['sass']
            },
            livereload: {
                files: ['*.html', '*.php', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
                options: {
                    livereload: true
                }
            }
        },
        sass: {
            options: {
                sourceMap: true,
                outputStyle: 'compressed'
            },
            files: {
                'css/styles.css': 'components/sass/styles.scss'
            }
        }
    });
    grunt.registerTask('default', ['sass', 'watch']);
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
}

Answer 1

同时将 options.livereload 添加到您的 watch.sass 中:

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

我遇到了同样的问题，我相信(虽然不是 100% 确定)这是由于 watch 在时间上太接近时没有触发 2 个任务造成的:

1. 你修改你的sass，这会触发watch
2. 你的 sass 创建 css
3. css 创建应该触发 watch 但它没有，因为它是在 1. 几毫秒前触发的