不用每次导入，为Angular组件提供全局的scss变量

Question

我已经在 src/styles/settings/_variables.scss 中定义了 SCSS 变量，然后将其导入到 src/styles.scss 中，但是在每个组件中这些变量仍然不可用。

有没有一种方法可以创建一个全局文件来保存所有的 SCSS 变量，以便于在其他组件中使用？因为在每个单独的组件的 .scss 文件中写入 @import 非常麻烦，特别是如果我有许多嵌套组件。

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

我使用带有 CLI 的 Angular 7.3。

- Vladimir Humeniuk

Answer 1

你只需要添加一点配置，所以在声明全局变量的地方，你需要将它包裹在: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，并不仅限于颜色/字体。那只是一个例子。

根据我的理解，您需要一个全局文件src/assets/style/global，然后将每个scss文件导入到其中，就像您在定义它们时那样。

@import 'filename';

如果你不想在组件内部使用全局变量，当你的全局变量起作用时，请查看ViewEncapsulation，因为它可以用来忽略它们。

- Dince12

---

我正在使用相同的方法，但您知道如何在CSS中使用定义的变量，例如box-shadow吗？ - Javascript Hupp Technologies

是的，本地CSS变量已经非常好了，但这不仅仅涉及颜色和字体大小，还包括一些混合和函数。 - Vladimir Humeniuk

如果您在上述编辑中没有成功，请尝试删除root:{}。 - devDan

哇，这个起作用了。这在Sass文档中在哪里？不知道它有什么影响... - Gel

如果我要在同一个全局scss文件中的@mixin中使用这个变量，包裹在:root {}中，那么它会如何工作？这样做是否会被所有其他组件识别，就像它识别变量一样？ - Gel

这并没有解决问题。这是使用CSS的“custom-properties”，而不是SCSS变量。 - Ahmad Alfy

Answer 2

有没有办法让所有组件都能使用带有scss变量的全局文件？

不导入全局文件，想要这些sass变量可用是不可能的。

在SASS中的工作方式是，如果使用部分文件更好地组织代码, 您可以使用@import指令进行引用。因此，如果在shared/_variables.scss中有一些sass变量：

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

这些变量需要在另一个样式表中使用，必须首先将其与该样式表一起 @import 导入：

// Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}

在Angular中，它以类似的方式工作（涉及引用外部样式表）。因此，如果您需要某些sass变量、mixin或函数被特定的component.scss使用，则没有其他干净的方法，只能使用@import指令在component.scss中引用它们。为了简化任务，您可以创建一个文件src/_variables.scss，并在component.scss中使用以下语法：

@import “~variables.scss”;

- Vadi

Answer 3

从全局文件轻松访问 sass 样式(s)是可能的，只需两个步骤。

1. 在 angular.json 文件中的 includePaths 数组中添加样式文件的文件夹路径。
2. 通过文件名在任何组件中导入样式文件。

假设您的文件和文件夹结构如下所示：src > my-styles-folder > var.scss

angular.json

"architect": {
  "build": {
    ...
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/my-styles-folder" // add path only, do not include file name
        ]
      },
      "styles": [
        ...
      ]
    }
    ...
  }
}

var.scss

$toolbar-heigh: 70px;

some-component.scss

@import "var"; // var.scss

mat-toolbar {
  height: $toolbar-height;
}

- WasiF

---

最佳解决方案，谢谢。 - Hossein Bajan

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

- Hossein Rahmian

---

你实际上不需要创建一个单独的 CSS 文件来导入，只需将它们放在你的 styles.scss/css 中即可，从而减少了你需要在每个组件的 scss/css 文件中导入单独文件的需求。 - Austin Born

Answer 5

在 Angular 8 中对我有效。

在您的 _variable.scss 文件中，您需要添加以下内容：

:root{--my-var:#fabada}

接下来进入你的angular.json文件，在"styles":中添加以下内容：

"最初的回答"

{"input":"yourPath/_variables.scss"}

- lauren

Answer 6

在每个 Angular 组件中，您可以使用来自文件的变量：

@use "/src/styles/settings/variables" as *;

在您的组件中，变量将会可用，希望这对您有所帮助。

- Constantine

Answer 7

您可以在styles.scss/css中使用:root{--my-var:#fabada}，并且无需额外的_variables文件。然后在任何组件中使用var(--my-var).

- Austin Born