求助：从CSS导入自定义变量至SCSS文件无法生效的问题

我完全理解你想要将CSS变量定义单独放在.css文件中，再在SCSS里复用的需求，咱们来一步步解决这个问题。

首先，你的代码里有两个关键问题导致写法不生效：

1. SCSS导入CSS文件的方式问题 #

当你在SCSS中使用@import './index'导入后缀为.css的文件时，SCSS会将其编译为原生CSS的@import url('./index.css')规则，而不是把CSS文件的内容合并到当前SCSS编译后的文件中。这意味着如果你的页面没有先加载index.css，:root里的变量就不会被定义，var(--primary)自然无法生效。

2. 语法错误 #

你的SCSS代码里.my-color: { ... }多了一个冒号，正确的选择器写法应该是.my-color { ... }，这个小错误也会导致样式无法正常解析。

正确的实现方式 #

方法一：保持CSS文件独立，正确导入并使用

首先保留你的index.css内容：

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

然后修改variable.scss的代码：

// 明确导入css文件，确保编译后能正确关联
@import './index.css';

// 将CSS变量赋值给SCSS变量（这一步是可选的，也可以直接在样式里用var(--primary)）
$color: var(--primary);

.my-color {
  color: $color;
  // 或者直接写 color: var(--primary);
}

注意：这种方式需要确保index.css在页面中先于编译后的SCSS文件加载，否则CSS变量无法被正确读取。

方法二：将CSS变量定义合并到SCSS编译流程中

如果你不想依赖外部文件的加载顺序，可以把index.css改名为index.scss（内容不变），这样SCSS会直接把它的内容合并到编译后的文件里：

// 导入scss文件（后缀可省略）
@import './index';

$color: var(--primary);

.my-color {
  color: $color;
}

这样编译后的CSS会包含:root变量定义和.my-color样式，无需额外加载单独的CSS文件。

额外提示 #

如果你希望同时拥有SCSS变量和CSS变量的便利性，也可以在SCSS中先定义SCSS变量，再注入到CSS变量中，这样两边都能复用：

// 定义SCSS变量
$primary: rgb(65, 120, 95);

// 注入到CSS变量
:root {
  --primary: #{$primary};
}

// SCSS中直接用变量，同时CSS也能访问--primary
.my-color {
  color: $primary;
}

不过这不符合你“在CSS文件中设置变量”的需求，所以前面两种方法更适合你的场景。

内容的提问来源于stack exchange，提问作者Text Error