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