Grunt: SCSS-Dateien nicht kompiliert

Question

Ich versuche, scss-Dateien mit Grunt zu kompilieren. Mit Thesen Module

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

, dass gesagt wird, alle meine regelmäßigen CSS-Dateien wird in meinem Haupt-CSS-Datei erstellt, aber keiner meiner .scss Dateien tut. Ich habe versucht, meine Dateien in der Befehlszeile manuell zu kompilieren, und es funktioniert gut (sass styles.scss:style.css), so dass es nichts mit meiner .scss oder Ruby zu tun hat. Was mache ich falsch? Diese

ist, wie mein Gruntfile.js sieht aus wie

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

ich einen Weg gefunden, es zu tun concat verwenden.

Das erste, was zu tun ist, fusionieren Sie alle scss und css in eine größere scss-Dateien (die ich für die Bequemlichkeit rief concat.scss).

Dann können Sie diese scss-Datei mit Sass Task erstellen.

So sollte Ihr Gruntfile.js aussehen.

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']); 

Ihre Dateistruktur wie diese

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

aussehen sollte