我正在尝试按照material design npm page将Material Design sass编译到我的主样式表中 .

// app.scss

@import "../../node_modules/material-components-web/material-components-web";

我正在使用一个笨拙的任务来做到这一点：

module.exports = function(grunt) {

    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded',
                    update: false
                },
                files: [{
                    expand: true,
                    cwd: 'src/scss',
                    src: ['*.scss'],
                    dest: 'dist/css/',
                    ext: '.css'
                }]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');

    grunt.registerTask('default', ['sass']);

}

当我运行任务时，我收到以下错误：

运行“sass：dist”（sass）任务错误：导入的文件未找到或不可读：@ material / button / mdc-button . 在src / scss / app.scss第9行的node_modules / material-components-web / material-components-web.scss第23行

使用 --force 标志会破坏我的构建并且不会纠正问题 .

知道问题是什么吗？这只是一个目录（@ material / button / mdc-button）的问题，还是你认为这扩展到了它的所有子目录/模块？

我有一种感觉这与grunt-contrib-sass loadPath 属性有关，但我不知道如何使用我的常规src文件脚本来实现它 .

我的设置或 options 属性中是否应该包含哪些内容？

谢谢你的帮助！

sass gruntjs material-design grunt-contrib-sass material-components-web