有没有办法让 SASS/SCSS 变量可以访问，而无需使用 Angular-CLI 在每个组件中导入它们答案

【问题标题】：Is there some way to make SASS/SCSS variables accessible without importing them in every component using Angular-CLI有没有办法让 SASS/SCSS 变量可以访问，而无需使用 Angular-CLI 在每个组件中导入它们
【发布时间】：2017-12-26 11:56:42
【问题描述】：

我正在做一个包含很多组件的项目。刚才我正在考虑使用 SASS 变量，但是将变量导入每个现有组件可能会很烦人。也许有人知道有没有办法让项目中所有 *.scss 文件中的 SASS 变量都可以访问，而无需导入它们。

【问题讨论】：

我不确定，但是当我想要一个全局 css 文件时，我将它放在 angular-cli 文件中的 Styles 部分。如果你把你的 scss 文件放在那里，也许这些变量可以从整个项目中访问而无需导入它们。

标签： angular sass less global-variables angular-cli

【解决方案1】：

到目前为止，您的问题的答案是“否”。我们必须在每个组件 sass 文件中导入 variables 和 mixins 文件。

angular-cli 确实提供了为sass 添加paths/includePaths 功能的配置。为此，我们必须在app 属性下添加以下配置。

"stylePreprocessorOptions": {
  "includePaths": [
    "style-paths"
  ]
}

使用上面的配置至少我们可以通过文件名直接include文件，如下所示跳过相对路径

@import 'variables';

有关参考，请参阅 #3700 和 global-styles 上的文档。

【讨论】：

在文档中，我在应用程序对象“stylePreprocessorOptions”中放入了 angular-cli.json，其中包含“includePaths”和我的变量的路径。但不幸的是，它不起作用。
您要做什么以及遇到什么错误？
我正在尝试通过添加到 angular-cli.json 中的对象“apps”，“stylePreprocessorOptions”中直接按名称导入文件，“stylePreprocessorOptions”：{“includePaths”：[“./src/assets/ " ] }，但我得到错误："模块构建失败。@import 'variables' - 文件未找到或不可读。
它有效。抱歉，刚刚删除了路径中的最后一个“/”）））非常感谢
这行得通，但每次包含一个文件，每次都会添加到最终输出中。这不影响性能吗？想象一下，如果包含的文件有 300 行长，并且每次都添加到 index.html 的头部。

【解决方案2】：

要使用全局 scss，请将您的 scss 添加到 angular-cli.json 中

"apps": [
   {
   // ... 
  "styles": [
     "./src/style.scss"
  ]
   }
]

在 index.html 中

<link rel="stylesheet" type="text/css" href="style.css">

【讨论】：