Laravel Mix 将多个 globbed SCSS 文件导入 app.scss答案

【问题标题】：Laravel Mix import multiple globbed SCSS files into app.scssLaravel Mix 将多个 globbed SCSS 文件导入 app.scss
【发布时间】：2021-04-11 09:38:28
【问题描述】：

我有一个项目结构，其中每个组件都有自己的 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');

它基本上可以工作。

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

有没有办法解决这个问题？还是有其他可行的方法？

据我所知，由于 Sass @import 不支持全局路径，因此不可能在 app.scss 中执行此类操作：

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

【问题讨论】：

标签： css laravel webpack sass laravel-mix

【解决方案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';

【讨论】：