Grunt：SCSS文件没有编译

Question

我想用grunt编译scss文件。使用论文模块

1. grunt-contrib-sass
2. grunt-contrib-watch
3. grunt-contrib-concat

他这样说，我所有的常规CSS文件被编译成我的主css文件，但没有我的.scss文件一样。我试图在命令行手动编译我的文件，并且它工作正常（sass styles.scss:style.css），所以它与我的.scss或ruby无关。我究竟做错了什么？

这是我Gruntfile.js看起来像

require('time-grunt')(grunt); 

var jsFileList = [ 
    'bower_components/slick-carousel/slick/slick.js', 
    'sources/js/dom_ready.js' 
]; 

var cssFileList = [ 
    'bower_components/bootstrap/dist/css/bootstrap.css', 
    'bower_components/slick-carousel/slick/slick.css', 
    'sources/sass/styles.scss', 
    'sources/sass/responsive.scss', 
]; 

grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    sass: { 
     dist: { 
      files: { 
       'assets/css/styles.css': cssFileList 
      } 
     } 
    }, 
    concat: { 
     options: { 
      separator: ';' 
     }, 
     dist: { 
      src: jsFileList, 
      dest: 'assets/js/script.js' 
     } 
    }, 
    watch: { 
     css: { 
      files: cssFileList, 
      tasks: ['sass'], 
     }, 
     js: { 
      files: jsFileList, 
      tasks: ['concat'] 
     } 
    } 
}); 

grunt.registerTask('default', [ 
    'sass', 
    'concat' 
]); 

grunt.loadNpmTasks('grunt-contrib-sass'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-concat'); 

Answer 1

我找到了一种方法使用CONCAT做到这一点。

首先要做的就是将你所有的scss和css合并成一个更大的scss文件（我为了方便起见调用concat.scss）。

然后，您可以使用sass任务生成该scss文件。

这就是你的Gruntfile.js应该看。

var jsFileList = [ 
    ... 
]; 

var cssFileList = [ 
    ... 
]; 

grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    concat: { 
     options: { 
      separator: ';' 
     }, 
     js: { 
      src: cssFileList, 
      dest: 'sources/sass/generated/concat.scss' 
     }, 
     css: { 
      src: jsFileList, 
      dest: 'assets/js/script.js' 
     } 
    }, 
    sass: { 
     dist: { 
      options: { 
       noCache : true, 
       style: 'compressed', 
       sourcemap: "none" 
      }, 
      files:{ 
       'assets/css/styles.css' : 'sources/sass/generated/concat.scss' 
      } 
     } 
    }, 
    watch: { 
     css: { 
      files: cssFileList, 
      tasks: ['concat','sass'] 
     }, 
     js: { 
      files: jsFileList, 
      tasks: ['concat'] 
     } 
    } 
}); 

grunt.registerTask('default',[ 
    'concat', 
    'sass' 
]); 
grunt.registerTask('sass',['concat','sass']); 

你的文件结构应该是这样的

/root 
    /bower_components 
     ... 
    /assets 
     /css 
      styles.css 
     /js 
      script.js 
    /sources 
     js 
      ... 
     sass 
      /generated 
       concat.scss 
      /inc 
       ... 
      /main 
       ... 
       styles.scss