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

【问题标题】：Global scss variables for Angular components without importing them everytimeAngular 组件的全局 scss 变量，无需每次都导入它们
【发布时间】：2019-08-03 12:13:25
【问题描述】：

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

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

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

我使用带有 CLI 的 Angular 7.3。

【问题讨论】：

标签： css angular sass global-variables angular7

【解决方案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数组中。

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

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;
}

【讨论】：