1

（新手帖）

我为这棵树使用了 Grunt ：

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',
}

它正确地接收.css文件。header/

这两种语法中的任何一种都没有任何错误。

任何的想法 ？

4

1 回答 1

2

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

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 文件模式和minimatch文件匹配模式。

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

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

于 2018-06-08T11:06:30.163 回答