使用变量从全局样式表到本地样式表角度 scss

Question

我正在使用 scss with angular，我想在通用样式表中将一些颜色声明为变量以访问它们，但我不知道如何调用它们，因为我收到下一个错误

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
80 │     background-color: var($green-color);

这是我的 styles.scss

$green-color: rgb(42, 132, 83);

我只是在另一个 scss 文件中调用它

.add {
    background-color: var($green-color);
}

Answer 1

我通常不建议在你的情况下在 scss 中使用变量，试试经典的 css 变量
或者，您可以将变量保存在一个单独的文件中，然后将其导入您喜欢的任何地方，然后使用它。

Answer 2

取决于您如何设置 sass 编译，但符号

var(--my-var)

适用于 css 全局变量。对于 sass 变量，你只需要导入声明变量的 scss 文件：

import 'variables';

然后像这样直接调用主题：

color: $my-var;