在 JavaScript 中通过 CSS Modules 使用 CSS 变量的完整指南

在 JavaScript 中调用 CSS 变量

一种常见做法是利用 :export 关键字，在 Less 或 Scss 文件中定义并导出一个 JavaScript 对象。

$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;

// $menuBg:#304156;
$menuBg:#304156;
$menuHover:#263445;

$subMenuBg:#1f2d3d;
$subMenuHover:#001528;

$backWhite:#ffffff;

$sideBarWidth: 210px;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  backWhite: $backWhite;
}

随后，在需要使用这些样式的 JavaScript 文件或模块中，通过导入语句引用该对象即可获取变量值。

import style from 'index.scss'
console.log(style.menuText)

在 Vue 单文件组件中的应用示例

import style from 'index.scss'
export default {
    computed:{
        style(){
            return style
        }
    }
}

其底层实现原理主要依赖于构建工具链。

具体而言，Webpack 配合 css-loader 可在项目中启用 CSS Modules 功能。

CSS Modules 内部通过 ICSS（Interoperable CSS）规范来解决样式的导入与导出问题。这分别对应了两个新增的伪类选择器：:import 用于导入，:export 用于导出。

补充：JavaScript 关键字说明

JavaScript 关键字（Reserved Words）是指在语言中具有特定语法含义的保留字。这些关键字构成了 JavaScript 语法的一部分，因此严禁将其用作变量名或函数名。若强行使用关键字命名，会导致 JavaScript 在加载阶段发生编译错误。

以下是部分 JavaScript 关键字列表：

break 、 delete 、 function 、 return 、 typeof case 、 do 、 if 、switch 、 var catch 、 else 、 in 、 this 、void continue 、 false 、 instanceof 、 throw 、 while debugger 、 finally 、 new 、 true 、 with default 、 for 、 null 、 try

此外，还存在一份 JavaScript 未来关键字（Future Reserved Words）列表：

abstract 、 double 、 goto 、 native 、 static boolean 、enum 、implements 、package 、 super byte 、 export 、 import 、 private 、 synchronized char 、 extends 、 int 、 protected 、 throws class 、final 、 interface 、 public 、 transient const 、float 、 long 、short 、 volatile

总结

至此，关于在 JavaScript 中如何使用 CSS 变量的介绍已完成。如需了解更多相关 JS 使用 CSS 变量的内容，建议搜索本站历史文章或继续阅读后续相关内容。感谢支持！