Angular SCSS全局变量导入 [英] Angular SCSS Global Variable Import

问题描述

我想在我的Angular项目中转到SCSS.到目前为止，我想要SCSS唯一使用的是变量.目前，我一直在使用CSS变量，这些变量的效果很好，因为您可以在我的styles.css中的:root 中声明它们，然后可以在应用程序中所有组件的CSS文件中使用它们./p>

我的问题是，使用SCSS(全局导入)是否可以做到这一点?因为我发现从一种由其自身全局导入的语言(CSS)过渡到现在需要我在需要的任何位置(SCSS)导入变量的工作非常繁琐.

对于为什么需要更好的版本，我有些失望.因此，我确信必须有某种方法不必在需要使用的每个SCSS中导入变量.

例如，我想在我的styles.scss中创建变量，然后我希望能够在我的任何组件样式中使用这些变量，而无需导入任何内容.在CSS变量中，可以从任何组件的CSS访问:root 中的-MyVar .

解决方案

您不必每次考虑此示例时都导入变量

theme.scss

  $ primary-color:#00b289;$ secondary-color:#505050;@import"components/_checkbox";@import"components/_button"; 

如您所见，我只对变量进行一次除垢，并且可以在我的部分sass文件中使用这些变量.

另一种方法是创建一个包含所有变量并导入一次的部分sass文件

theme.scss

  @import"_variables.scss";@import"components/_checkbox";@import"components/_button"; 

I would like to move over to SCSS in my Angular project. So far the only use I want from SCSS is the variables. At the moment I have been using CSS variables which work very nicely because you declare them in :root in my styles.css and then you can use them in all the components' CSS files in the app.

My question is whether this is possible with SCSS (a global import)? Because I find it very tedious to move from a language that imported globally by it self (CSS) to something that now requires me to import variables wherever I need it (SCSS).

I am a bit disappointed on why a better version of something would require me to do this. Therefore I am sure there must be some way to not have to import my variables in every SCSS I need them in.

For example, I want to create variables in my styles.scss, and then I want to be able to use those variables in any of my components' styles, without importing anything. In CSS variables like --MyVar in :root is accessible from any components' CSS.

解决方案

You don't need to import variables everytime consider this example

theme.scss

$primary-color:#00b289;
$secondary-color:#505050;

@import "components/_checkbox";
@import "components/_button";

as you can see I only decalre my variables once and I can use the variables inside my partial sass file.

another way is to create a partial sass file include all your variables and imported once

theme.scss

@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";

这篇关于Angular SCSS全局变量导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！