如何实现css变量中vscode编辑器中的类型提示

方法是利用TypeScript类型声明,并通过"模块扩展" (Module Augmentation)。,扩展标准 CSS 属性

  1. 创建类型声明文件,比如css.d.ts
  2. 声明自定义属性
typescript 复制代码
// 引入 'csstype' 以便扩展它
import 'csstype';

declare module 'csstype' {
  // 扩展 Properties 接口,它定义了所有合法的 CSS 属性
  interface Properties {
    // 在这里把你所有的 CSS 变量都列出来
    '--flood-font-family'?: string;
    '--flood-primary-color'?: string;
    '--flood-active-color'?: string;
    '--flood-border-color'?: string;
  }
}
  1. 在tsconfig中,引入类型声明文件
json 复制代码
 "include": [
    // ......
    "types/**/*.d.ts"
  ],
相关推荐
前端架构师-老李1 小时前
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识
前端·css·html
echome8881 小时前
CSS 布局:Flex 和 Grid 怎么选,附常见坑
前端·css·html
东鹏特饮3 小时前
本机状态监控页面html
运维·css·html·css3
蓝莓味的口香糖1 天前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
是立不是利1 天前
CSS 的 Flex 布局——为什么元素没有按我想的排列
前端·css
java1234_小锋2 天前
【技术专题】CSS3 网页技术 - CSS3 盒模型
前端·css·css3
前端架构师-老李2 天前
HTML与CSS基础第四课—strong、em、b、i 各表示什么
前端·css·html
程序0072 天前
天地图实现收货地址定位
前端·javascript·css
汤米粥2 天前
目前流行的前端 CSS 框架
前端·css·bootstrap·ant design·‌tailwind css·bulma
是立不是利2 天前
CSS 的层叠与优先级——为什么我的样式不生效
前端·css