角度组件的全局scss变量，而无需每次导入它们
角度组件的全局scss变量，而无需每次导入它们
提问于 2019-03-13 06:07:47
我已经在src/styles/settings/_variables.scss中定义了SCSS变量，并且正在将它们导入到src/styles.scss中，但是这些变量并不是对每个组件都可用。
有没有办法创建一个全局文件来保存我其余组件的所有SCSS变量？因为在每个单独的组件.scss文件中编写@import是非常令人沮丧的，特别是当我有许多嵌套的组件时。
我知道，有很多类似的问题，但它们似乎都过时了，与最新版本的Angular无关。
我使用带有CLI的Angular 7.3。
回答 2
Stack Overflow用户
发布于 2019-03-13 07:48:02
您只需要添加更多的配置，因此在声明全局变量时，需要将其包装在:root{}中。所以在src/styles/settings/_variables.scss中。
:root
{
--blue: #00b; // or any global you wish to share with components
}然后，当您在SCSS中使用它们时，您需要像这样访问它们。
.example-class {
background-color: var(--blue)
}此外，关于注释，此方法可以使用mixins、@media和keyframes，并且不仅限于颜色/ font。这是一个例子。
据我所知，您需要一个全局文件src/assets/style/global，然后将每个scss文件导入到您定义它们的位置。
@import 'filename';如果您不希望在组件中使用全局变量，请在全局变量工作时进行查看。查看ViewEncapsulation，因为这可以用来忽略它们。
Stack Overflow用户
发布于 2021-06-06 16:15:48
第一步:转到自定义scss文件(shared/css/_variable.scss)并编写这一部分
:root{
--color-text: red;
--color-btn-success: green;
}
在转到style.scss (这是主文件)并导入此文件后：
@import './shared/css/Variables';
现在，您可以使用以下语法在所有组件中使用变量：
.sample{
color : var(--color-text);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55131372
复制相关文章
相似问题