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

Question

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

我试过了，将 components.scss 文件导入 app.scss:

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

而且基本有效。

Except, 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';

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

Laravel Mix import multiple globbed SCSS files into app.scss

css

sass

laravel

webpack

laravel-mix