Laravel 混合导入多个 globbed SCSS 文件到 app.scss

Question

我有一个项目结构，其中每个组件都有自己的 SCSS 文件，我希望将所有这些自动导入到项目的主app.scss文件中，而不必单独列出它们或在每次新组件时更新列表被添加。 我知道合并一堆全局 CSS 文件可能会导致选择器顺序出现问题，但这不是问题。

我已经尝试过，将components.scss文件导入app.scss ：

mix.styles('resources/views/components/*.scss', 'resources/css/components.scss');
mix.sass('resources/css/app.scss', 'public/css');

它基本上有效。

除了， mix.styles()在 Sass 编译之后运行，因此您最终会导入上一次执行的components.scss文件，而不是当前文件。

有没有办法解决这个问题？ 还是有另一种可行的方法？

由于 Sass @import不支持 glob 路径，据我所知，在app.scss中不可能做这样的事情：

@import 'resources/views/components/*';

Answer 1

发现这可以通过node-sass-glob-importer轻松完成，它与 Mix 使用的 Dart Sass 实现兼容：

const sassGlobImporter = require('node-sass-glob-importer');

mix.sass('resources/css/app.scss', 'public/css', {
    sassOptions: {
        importer: sassGlobImporter(),
    }
});

resources/css/app.scss

@import '../views/components/**/*.scss';