将变量从 css 导入到 scss

【问题标题】：Import variable from css to scss将变量从 css 导入到 scss
【发布时间】：2020-04-27 04:45:32
【问题描述】：

思路很简单，在.css中声明一个变量，在.scss文件中使用。

index.css

:root {
  --primary: rgb(65, 120, 95);
}

变量.scss

@import './index';

$color: var(--primary);


.my-color: {
  color: $color
}

不工作。我知道如果你这样做了

$primary: rgb(65, 120, 95);

.my-color: {
  color: $color
}

正在工作。

但我想在 css 文件中设置变量。谢谢

【问题讨论】：

【解决方案1】：

您不能以这种方式使用 CSS 变量。您可以在 SCSS 文件中导入 CSS 文件以供参考，但不能直接访问 CSS 变量。您只能在 SCSS 文件之间共享变量。

你最好将index.css 制作成另一个SCSS 文件，然后在variable.scss 中声明你的变量。然后将variable.scss 导入index.scss，它现在可以访问所有变量。您只需要更改被引用的文件，使它们指向index.scss。

见下文。

variables.scss

$primary: rgb(65, 120, 95);

index.scss

@import "/variables";

.my-color: {
  color: $primary
}

【讨论】：