如何通过@use引入CSS自定义属性？SCSS拆分后变量访问问题求助

核心问题解析 #

你之前的错误在于混淆了SCSS模块成员和原生CSS自定义属性的使用方式：var()是原生CSS的函数，并非SCSS模块里的方法，所以不能用a.var(--xxx)这种语法调用。只要确保定义CSS自定义属性的规则被编译到最终CSS中，这些变量就全局可用，不需要通过SCSS模块的方式访问。

正确实现步骤 #

1. 保持_colors.scss的变量定义

在abstracts/_colors.scss里正常定义CSS自定义属性（推荐用:root选择器，比html优先级更高，更适合全局变量）：

// abstracts/_colors.scss
:root {
  --font-color: #333;
  --color-primary-500: #165DFF;
  --color-primary-400: #4080FF;
  // 其他Tailwind风格的颜色变量...
}

2. 正确引入抽象层文件

在main.scss里只需引入抽象层，不需要通过模块前缀调用变量：

// main.scss
@use './abstracts';

#site-header, #site-footer {
  // 直接用原生CSS var()调用自定义属性
  color: var(--font-color);
  background-color: var(--color-primary-500);
}

这样_colors.scss里的:root规则会被编译到最终CSS中，自定义属性全局生效，组件样式就能正常读取。

进阶优化：用SCSS变量映射自定义属性 #

如果习惯用SCSS模块的方式管理变量，可以在_colors.scss里定义SCSS变量来映射CSS自定义属性，兼顾模块规范和原生变量的灵活性：

// abstracts/_colors.scss
:root {
  --font-color: #333;
  --color-primary-500: #165DFF;
}

// 定义SCSS变量，映射对应的CSS自定义属性
$font-color: var(--font-color);
$color-primary-500: var(--color-primary-500);

然后在main.scss里通过模块前缀调用SCSS变量：

// main.scss
@use './abstracts' as a;

#site-header, #site-footer {
  color: a.$font-color;
  background-color: a.$color-primary-500;
}

这种方式既符合7-1架构的模块化规范，又不影响JavaScript动态修改CSS自定义属性的逻辑——JS修改的是:root下的--xxx变量，SCSS变量只是对它的引用。

结论 #

完全不需要把颜色相关CSS留在同一文件，只要正确区分SCSS模块和原生CSS自定义属性的使用逻辑，就能顺利完成7-1架构的拆分，同时保留JS动态注入主题色的功能。

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