Angular中全局引用scss变量

使用情景

1. 项目比较复杂的时候，引用全局css样式引用路径会变得很长@import './../../../style.csss'。
2. 在scss中定义了全局的样式变量，希望在每个组件都可以直接使用。

解决方案

我是用的angular9, 脚手架版本是"@angular/cli": "~9.1.9"

在angular.json中增加：

{
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/styles/"
      ]
    },
    "styles": [
      "src/styles/theme.less",
      "src/styles/index.scss"
    ],
}