时间戳

首页 > 解决方案 > 无法在 SASS 中全局访问变量

css - 无法在 SASS 中全局访问变量

问题描述

我试图在一个文件中设置全局变量，然后在整个应用程序的所有其他 scss 文件中使用这些变量。当我设置变量时，我可以在该特定文件中使用它们，但不能在其他文件中使用它们。我正在使用 '@use' 方法而不是 '@import' 作为 sass 文档推荐的方法，但似乎 '@import' 方法可以实现我所需要的，但是我需要一个长期的解决方法。最后，我尝试使用“@forward”方法，但看不到任何变化，我得到了同样的错误。

应用程序.scss

@use 'layouts/variables.scss';
@use 'layouts/forms.scss';

_variables.scss

$ds-black: #212121;

_forms.scss

input
{
    border: 1px solid $ds-black;
}

编译时的控制台输出：

Error: Undefined variable.
   ╷
14 │     border: 1px solid $ds-black;
   │                       ^^^^^^^^^
   ╵
  resources\css\layouts\_forms.scss 14:23  @use
  resources\css\app.scss 4:1               root stylesheet

我尝试使用 ' !global ' 属性但是我得到了这个错误以及之前的错误

Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Since this assignment is at the root of the stylesheet,
the !global flag is unnecessary and can safely be removed.

  ╷
9 │ $ds-black: #212121 !global;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    resources\css\layouts\_variables.scss 9:1  @use
    resources\css\app.scss 3:1                 root stylesheet

标签： cssdartsass

解决方案

https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace

您可以将使用标签更改为类似

@use 'layouts/variables' as *;

或者

@use 'layouts/variables';

//and then
input
{
    border: 1px solid variables.$ds-black;
}

推荐阅读