如何实现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"
  ],
相关推荐
嘉琪0012 小时前
封装一个有最小化的dialog组件
前端·javascript·css
春秋半夏4 小时前
音乐播放、歌词滚动
前端·css
饮茶三千5 小时前
几个在开发中起大作用的CSS新特性!
前端·css
十盒半价9 小时前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
Savior`L12 小时前
CSS知识复习5
前端·css
Liudef0617 小时前
儿童趣味记忆配对游戏
css·游戏·css3
吉吉安1 天前
两张图片对比clip功能
javascript·css·css3
快起来别睡了1 天前
CSS 层叠上下文:从“谁在前,谁在后”说起
css
南方kenny1 天前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
爱编程的喵1 天前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css