我有一个项目结构，其中每个组件都有自己的 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/*';
发现这可以通过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';
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句