Grunt - scss 未编译 - gruntFile.js

Question

(初学者post)

我将 Grunt 用于 this tree :

Gruntfile.js :

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: {
                    'css/style.css': 'Component/**/*.scss',
                }
            }
        },
        watch: {
            css: {
                files: 'Component/**/*.scss',
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

它运行没有任何错误，但它不占用任何文件。 style.css 还是空的。

当我替换这一行时：

files: {
    'css/style.css': 'Component/**/*.scss',
}

与 :

files: {
    'css/style.css': 'Component/header/header.scss',
}

它在 header/ 中正确获取 .css 文件。

我对这两种语法都没有任何错误。

有什么想法吗？

Answer 1

您需要使用 grunt 文件模式递归获取源文件夹中的所有文件：

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: [{
                    expand: true,
                    cwd: 'Component/',
                    src: ['**/*.scss'],
                    dest: 'css/',
                    ext: '.css'
               }]
            }
        },
        watch: {
            css: {
                files: ['Component/**/*.scss'],
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

要使用 Grunt 文件模式，您需要指定一个带有选项的对象，而不是 'destination': 'source' 形式的默认设置。文件模式对象有以下选项：

{

    // source directory 
    cwd: String,

    // creates the subdirectories or flatten the content to the destination directory
    flatten: Boolean,

    // remove anything and after the file extension and replace with the ext String
    ext: String,

    // destination folder
    dest: String,

    // source file pattern using minimatch to match files
    src: String|Array

}

有关 Grunt file patterns and minimatch 文件匹配模式的更多信息。

编辑为达到预期效果（将所有组件编译到一个文件中），您需要执行以下操作：

更改所有组件的文件名，例如将 Component/header/header.scss 更改为 Component/header/_header.scss。以 _ 为前缀的文件不会创建任何输出（Sass 默认行为）。
然后创建一个 bootstrap 文件（我们称之为 style.scss，仅包含对要合并到输出 css 文件中的文件的引用。对于每个文件添加@import 'header/header'; for header/_header.scss。您不需要添加扩展名或 _ 前缀。
将您 sass:dist 任务的 files 定义更改为：{ 'css/style.css' : ['Component/style.scss'] }

Gruntfile.js 现在看起来像这样：

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: { 'css/style.css' : ['Component/style.scss'] }
            }
        },
        watch: {
            css: {
                files: ['Component/**/*.scss'],
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

这会将 Component/style.scss（包含对所有组件文件的引用）编译为 css/style.css。

Grunt - scss 未编译 - gruntFile.js

Grunt - scss is not compiled - gruntFile.js

sass

watch

gruntjs

grunt-contrib-watch

grunt-contrib-sass