Sass Grunt-未编译scss-grunfile.js

（初级职位）

我使用Grunt来：

grunfile.js：

module.exports=函数（grunt）{
grunt.initConfig({
sass：{
地区：{
选项：{
样式：“扩展”
},
档案：{
“css/style.css”：“Component/***.scss”，
}
}
},
观察：{
css:{
文件：'Component/***.scss'，
任务：['sass']
},
},
});
grunt.loadNpmTasks（“grunt-contrib-sass”）；
grunt.loadNpmTasks（“grunt-contrib-watch”）；
registerTask（'default'，['watch']）；
}

它运行时没有任何错误，但不接受任何文件。

style.css

仍为空

当我替换此行时：

文件：{
“css/style.css”：“Component/***.scss”，
}

与：

文件：{
'css/style.css'：'Component/header/header.scss'，
}

它正确地获取

头文件中的
.css
文件

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

有什么想法吗？
您需要使用grunt files模式以递归方式获取sources文件夹中的所有文件：

module.exports=函数（grunt）{
grunt.initConfig({
sass：{
地区：{
选项：{
样式：“扩展”
},
档案：[{
是的，
cwd:“组件/”，
src:['***.scss']，
dest:'css/'，
分机：'.css'
}]
}
},
观察：{
css:{
文件：['Component/**.scss']，
任务：['sass']
},
},
});
grunt.loadNpmTasks（“grunt-contrib-sass”）；
grunt.loadNpmTasks（“grunt-contrib-watch”）；
registerTask（'default'，['watch']）；
}

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

{
//源目录
cwd：字符串，
//创建子目录或将内容展平到目标目录
展平：布尔，
//删除文件扩展名之后的任何内容并替换为ext字符串
分机：字符串，
//目标文件夹
目的地：字符串，
//使用minimatch匹配文件的源文件模式
src:String |数组
}

更多关于和文件匹配模式的信息

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

更改所有组件的文件名，例如将
Component/header/header.scss
更改为
Component/header/_header.scss
。以
为前缀的文件将不会创建任何输出（Sass默认行为）

然后创建一个引导文件（我们调用is
style.scss
，只包含对要合并到输出css文件中的文件的引用。对于每个文件，为
header/\u header.scss
添加
@import'header/header'；
。无需添加扩展名或
前缀
将您的
sass:dist任务的
files
定义更改为：
{'css/style.css'：['Component/style.scss']}

Gruntfile.js
现在将如下所示：

module.exports=函数（grunt）{
grunt.initConfig({
sass：{
地区：{
选项：{
样式：“扩展”
},
文件：{'css/style.css'：['Component/style.scss']}
}
},
观察：{
css:{
文件：['Component/**.scss']，
任务：['sass']
},
},
});
grunt.loadNpmTasks（“grunt-contrib-sass”）；
grunt.loadNpmTasks（“grunt-contrib-watch”）；
registerTask（'default'，['watch']）；
}

这将编译
Component/style.scss
（包含对所有组件文件的引用）到
css/style.css
我得到了这个：`Running“watch”任务正在等待…警告：pattern.indexOf不是一个函数`PS:它会将此错误循环到无穷远。@BobRock抱歉，我对
watch
taks感到困惑。我已经更新了我的答案。现在它应该可以工作了。让我知道。当我在“Component/***.scss”中从.scss更改道具时，它不会监视：s它什么也不做，也没有错误。@BobRock所有的文件都在
组件
？或者你有嵌套的文件夹吗？它是
组件
或者
组件
？我不好，它工作正常，我忘了删除“s”。非常感谢你解决了我的问题。