Gruntfile.js 在看到更改时不会转换 SASS 文件

Question

我正在尝试设置 grunt 以自动将我的 SCSS 编译为 CSS。 我首先使用 Ruby 安装 Sass，然后安装了 Grunt，并使用这个 gruntfile.js 运行它：

gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'mysite/static/css/grunt.css' : 'mysite/static/sass/_video.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

当我运行命令时：

咕噜咕噜的手表

Grunt 运行并监视我的文件中的任何更改，它会看到更改，但从不将 SCSS 转换为 CSS。

dominic@dom-Inspiron-7559:~/Desktop/Projects/stemletics/stemletics/mysite$ grunt watch
Running "watch" task
Waiting...
>> File "mysite/static/sass/_video.scss" changed.
Running "sass:dist" (sass) task

Done.
Completed in 0.517s at Sun Oct 28 2018 22:36:47 GMT-0400 (EDT) - Waiting...

我正在使用本指南：http://ryanchristiani.com/getting-started-with-grunt-and-sass/

Answer 1

试试下面的设置

grunt.initConfig({
  sass: {
    dev: {
      src: ['mysite/static/sass/_video.scss'],
      dest: 'mysite/static/css/grunt.css',
    },
  },
  watch: {
    sass: {
      files: ['mysite/static/sass/*.scss'],
      tasks: ['sass'],
    },
    livereload: {
      options: { livereload: true },
      files: ['mysite/**/*'],
    },
  },
});