Question

我正在尝试使用grunt编译scss文件。使用这些模块

grunt-contrib-sass
grunt-contrib-watch
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

Grunt：未编译SCSS文件

1 个答案: