Angular 15如何设置Sass/SCSS导入根目录为src/styles（无需ng eject）

可以通过angular.json的配置实现将Sass/SCSS的导入根目录设为src/styles，无需使用ng eject，具体操作如下：

1. 修改angular.json的样式预处理器配置
   找到项目配置下的architect.build.options.stylePreprocessorOptions，将includePaths设置为仅包含src/styles：

   "stylePreprocessorOptions": {
     "includePaths": [
       "src/styles"
     ]
   }
   

   配置完成后，在组件或样式文件中导入时，直接写@import "variables";即可自动从src/styles目录查找对应的_variables.scss文件，无需编写相对路径。

2. 关于默认包含node_modules的说明
   Angular会默认将node_modules加入Sass的搜索路径，这是为了方便导入第三方库的样式（如Bootstrap的SCSS文件），属于正常行为。只要你的自定义样式文件名不与第三方库的文件冲突，就不会产生问题。

3. 用WebStorm辅助规范导入路径
   若想避免误从项目根目录导入文件，可以在WebStorm中做如下设置：

   • 打开Settings → Languages & Frameworks → Stylesheets → Sass/SCSS
   • 在Imports区域，将Default import path设置为src/styles
     这样IDE会对不符合路径规范的导入标红，帮助你统一导入逻辑。

4. 额外注意事项

   • 若src/styles下有子目录，导入时直接写子目录路径即可，比如@import "components/button";
   • 确保全局主样式文件（如styles.scss）在angular.json的styles数组中配置正确，示例：

     "styles": [
       "src/styles/styles.scss"
     ]
     

内容的提问来源于stack exchange，提问作者Pavel B.