如何缩短到 _variables.scss 的路径？答案

【问题标题】：How do I shorten paths to _variables.scss?如何缩短到 _variables.scss 的路径？
【发布时间】：2020-10-08 16:18:53
【问题描述】：

我正在尝试缩短我的 @import 语句。目前他们都是 @import "apps/playground/src/app/quiz/styles/variables"; 在我所有的 SCSS 文件中。

在 angular.json 中我已经指定：

"styles": [
  "apps/playground/src/app/quiz/styles/styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "quiz/styles/"
  ]
},

在styles.scss 我有@import "variables";

当我在任何组件 SCSS 文件中尝试 @import "~variables" 时，它似乎不起作用，它只是说“无法解析文件 '~variables'”。

【问题讨论】：

我感觉这与一个问题“~ tilde operator cannot to path to scss under app/src”stackoverflow.com/a/51012477/6022352 有关

【解决方案1】：

在您的任何组件中，您现在应该可以只使用@import 'variables';，不需要 ~.

Angular 将在添加到 includePaths 的任何目录中查找要导入的样式。
~ 字符用于从 node_modules 导入。

编辑：需要将includePaths中的路径改为：apps/playground/src/app/quiz/styles/

【讨论】：