Angular 组件的全局 scss 变量，无需每次都导入它们

Posted 2023-03-06

【中文标题】Angular 组件的全局 scss 变量，无需每次都导入它们

【英文标题】：Global scss variables for Angular components without importing them everytime

【发布时间】：2019-08-03 12:13:25

【问题描述】：

我已经在 src/styles/settings/_variables.scss 中定义了 SCSS 变量，并且我正在将它们导入到 src/styles.scss，但这些变量仍然不适用于每个组件。

有没有办法创建一个全局文件来保存我其余组件的所有 SCSS 变量？因为在每个组件 .scss 文件中写入 @import 非常令人沮丧，特别是如果我有许多嵌套组件。

我知道，有很多类似的问题，但似乎它们都已经过时并且与 Angular 的最新版本无关。

我使用带有 CLI 的 Angular 7.3。

【参考方案1】：

有什么方法可以使带有 scss 变量的全局文件可用于所有组件？

如果不每次在每个组件中导入全局文件，您希望那些 sass 变量可用，这是不可能的。

它在SASS中的工作方式，如果使用partials来更好地组织代码，您可以应用@import指令进行引用。所以如果shared/_variables.scss中有一些sass变量：

$lightslategray: #778899;
$darkgray: #A9A9A9;

并且这些变量需要在另一个样式表中使用，带有它们的样式表必须先@import-ed到它：

// Shared
@import "shared/variables";

.content 
  background: $lightslategray;

在 Angular 中，它以类似的方式工作（相关引用外部样式表）。因此，如果您需要某些sass variables, mixins or functions 供特定component.scss 使用，则没有其他干净的方法，只能使用@import 指令在component.scss 中引用它们。为了简化任务，您可以创建一个文件 src/_variables.scss 并在 component.scss 中使用类似这样的语法：

@import “~variables.scss”;

【参考方案2】：

您只需要添加一些配置，因此在声明全局变量的地方，您需要将其包装在: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)

补充一点关于cmets，这个方法可以使用mixins、@media和keyframes，并且不仅限于颜色/字体。这是一个例子。

据我了解，您需要一个全局文件 src/assets/style/global，然后将每个 scss 文件导入到您定义它们的位置。

@import 'filename';

如果您不想在组件中使用全局变量，请在全局变量工作时查看。查看ViewEncapsulation，因为这可以用来忽略它们。

【讨论】：

我用的是同样的方法，但你知道如何在 css 中使用定义的变量，比如 box-shadow 吗？

是的，原生 css 变量已经很不错了，但这不仅仅是颜色和字体大小，还有一些 mixins 和函数。

如果您对上述编辑不满意，请尝试删除根目录：。

哇这工作。这在 sass 文档中在哪里？想知道它的含义是什么......

所以如果我要在我的@mixin 中使用这个变量，它包含在 :root 中的同一个全局 scss 文件中，那将如何工作？这会被所有其他组件识别，就像它识别变量一样？

【参考方案3】：

在 Angular 8 中为我工作。

您必须在 _variable.scss 文件中添加：

:root--my-var:#fabada

然后进入你的 angular.json 并将其添加到 "styles":

"input":"yourPath/_variables.scss"

【参考方案4】：

第一步：进入自定义scss文件（shared/css/_variable.scss）并编写这部分

:root
  --color-text: red;
  --color-btn-success: green;

转到 style.scss（这是主文件）并导入此文件后：

@import './shared/css/Variables';

现在您可以使用此语法在所有组件中使用变量：

.sample
  color : var(--color-text);

【参考方案5】：

通过两个步骤轻松访问全局文件中的 sass 样式。

将样式文件的文件夹路径添加到angular.json文件中的includePaths数组中。

在任何组件中按文件名导入样式文件。

angular.json

"architect": 
  "build": 
    ...
    "options": 
      "stylePreprocessorOptions": 
        "includePaths": [
          "src/styles/var" // add path only, do not include file name
        ]
      ,
      "styles": [
        ...
      ]
    
    ...
  

some-component.scss

@import "var";

mat-toolbar 
  height: $toolbar-height;