如何在.css文件中调用.scss文件中声明的颜色变量？

嘿，我来帮你解决这个问题～你的方法之所以无效，核心原因在于纯.css文件无法识别Sass变量语法，也不会自动编译.scss预处理器文件：

• 浏览器和普通CSS解析器只认识标准CSS语法，$whiteColor这种Sass专属的变量写法在纯.css里会被当作无效代码
• CSS原生的@import只能引入其他.css文件，没法处理.scss这类需要预编译的文件

下面给你两种可行的解决方案，按需选择：

方案1：使用Sass编译整个项目（推荐） #

这是最符合你初始需求的方式，能充分利用Sass预处理器的优势：

1. 把你的mycssfile.css重命名为mycssfile.scss（让它成为Sass文件）
2. 在mycssfile.scss里正常引入变量文件并使用变量：

   @import "./myscssfile.scss";
   body { color: $whiteColor; }
   

3. 你的变量文件保持不变：

   $whiteColor : #ffffff;
   

4. 用Sass编译器（比如常用的dart-sass）把主.scss文件编译成标准.css文件，执行命令：

   sass mycssfile.scss mycssfile.css
   

   编译完成后，生成的mycssfile.css会自动把变量替换成实际颜色值：

   body { color: #ffffff; }
   

   之后在HTML里引入这个编译好的.css文件即可。

方案2：改用CSS原生自定义属性（无需预编译） #

如果不想用Sass编译，也可以用浏览器原生支持的CSS变量来实现类似效果：

1. 创建一个定义变量的.css文件（比如myvars.css）：

   :root {
     --whiteColor: #ffffff;
   }
   

2. 在你的mycssfile.css里引入这个变量文件，并使用var()调用变量：

   @import "./myvars.css";
   body { color: var(--whiteColor); }
   

   这种方式不需要任何预编译工具，浏览器会直接识别并解析变量。

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