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

Question

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

Answer 1

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

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

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

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

@import 'variables';

有关参考，请参阅#3700和全局样式文档。

Answer 2

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

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

和索引.html

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