Grunt：SCSSファイルがコンパイルされていません

Question

scootファイルをgruntでコンパイルしようとしています。言われていることを論文モジュール

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

どのように見えるかです。

最初に行うことは、scssとcssをすべて1つの大きな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 

のようになります。