咕噜咕噜 - scss 未编译 - 咕噜咕噜文件.js

Question

(初学者帖子(

我用咕噜声来表示这棵树：

咕噜咕噜.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 文件模式以递归方式获取 sources 文件夹中的所有文件：

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 文件模式和迷你匹配文件匹配模式的更多信息。

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

1. 更改所有组件的文件名，例如将Component/header/header.scss更改为Component/header/_header.scss。以_为前缀的文件不会创建任何输出(Sass 默认行为(。
2. 然后创建一个引导程序文件(let's call isstyle.scss，仅包含对要合并到输出 css 文件中的文件的引用。对于每个文件，请为header/_header.scss添加@import 'header/header';。您无需添加扩展名或_前缀。
3. 将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.