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