Angular(JHipster)如何在global.scss中导入整个util目录的SCSS文件？

嘿，我在JHipster + Angular项目里刚好碰到过一模一样的问题！其实Sass本身不支持直接用通配符导入整个文件夹，这就是你试了@import "util/*"这类写法报错的原因。不过有几个简单靠谱的解决办法，我给你捋一捋：

方法一：创建文件夹索引文件（最推荐，无需额外配置） #

这是Sass官方推荐的做法，步骤很简单：

1. 在你的util文件夹里新建一个索引文件，比如命名为_index.scss（注意下划线开头，这是Sass局部文件的命名规范，不会被单独编译成CSS）
2. 在这个索引文件里，逐个导入文件夹里的所有SCSS局部文件：

// util/_index.scss
@import "./variables";
@import "./mixins";
@import "./common-styles";
// 把你util文件夹里的所有.scss文件都按需要的顺序列在这里

3. 回到global.scss里，只需要导入这个索引文件就行：

// global.scss
@import "util/index";
// 或者因为索引文件是下划线开头的局部文件，你可以简化成：@import "util";

这种方法的好处是清晰可控，你能明确控制文件的导入顺序（Sass的变量、混入依赖顺序很重要），而且不需要修改任何项目配置。

方法二：借助工具自动导入（适合文件较多的场景） #

如果你的util文件夹里文件特别多，不想手动维护索引文件，可以用webpack的sass-resources-loader来自动导入所有匹配的文件。不过JHipster项目已经预设了webpack配置，你需要调整webpack.common.js或者对应的配置文件，添加这个loader的规则。不过个人还是更推荐第一种方法，因为自动导入可能会出现依赖顺序问题，排查起来麻烦。

另外要提醒你：记得把util里的所有SCSS文件都改成下划线开头的局部文件（比如_variables.scss而不是variables.scss），这样Sass就不会把它们编译成独立的CSS文件，只会在导入时合并到最终的样式里。

内容的提问来源于stack exchange，提问作者aseolin