jsx/tsx使用cssModule和typescript-plugin-css-modules

目录

1，前言 2，效果图 3，如何使用 3.1，安装 3.2，配置 4，示例 5，插件错误处理 5.1，错误触发原因 5.2，解决办法

1，前言

在 vite/webpack 搭建的项目中，不管是 vue 还是 react ，都可以写 jsx/tsx ，为了避免样式污染，常用的方式有两种。一种是每个组件都用一个唯一类名 class 包裹，使用 less/scss 嵌套样式。另一种是使用 cssModule 模块化。本文就分享一下如何使用 cssModule ，并推荐一个好用的插件： typescript-plugin-css-modules ，让你在 vscode 中，能拥有 typeScript 一样的智能提示。

2，效果图

3，如何使用

注：本文各种配置均使用 vscode 编辑器。

3.1，安装

yarn

 yarn add -D typescript-plugin-css-modules
 

npm

 npm install -D typescript-plugin-css-modules
 

3.2，配置

配置后需要重启 vscode ，然后项目中使用 cssMoudule 时，就可以享受到 typeScript 提示的 class 类名了，配置如下：

配置 tsconfig.json

 {
  "compilerOptions": {
    "plugins": [{"name": "typescript-plugin-css-modules"}]
  }
}
 

配置 settings.json

在项目根目录新建 .vscode 文件夹，在文件夹中新建 settings.json ，并写入如下配置，用于指明使用 typescript.tsdk 的位置以及开启提示，如果 vscode 有提示，记得同意。

 {
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}
 

注意： cssModule 可以用于 css，less，scss 等，使用时， css/less/scss 文件后缀必须由 .css/.less/.scss 变为 .module.css/.module.less/.module.scss

4，示例

index.tsx

 import { defineComponent } from 'vue'
import styles from './index.module.scss'

export default defineComponent({
  name: 'notFound',
  setup() {
    return () => (
      <div class={styles.main_box}>11111</div >
    )
  }
})
 

index.module.scss

 .main_box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: #ffffff;
}
 

5，插件错误处理

截止本文发布之时， typescript-plugin-css-modules 的版本为 3.4.0 ，此插件有一个bug，会导致 cssModule 类型提取失败，模块类型是一个 {} 的情况，如下所示：

Property ' ' does not exist on type {}

issues地址

5.1，错误触发原因

这个bug目前有两个方式都会触发：

1，当你项目中使用 less/scss 的 @include/@mixin 等等指令的时候

2，当你的项目使用 / deep / 这样的深度选择器语法的时候

5.2，解决办法

1，在需要使用 @include/@mixin 等等指令的时候，在 cssModule 文件的头上引入样式，就可以解决(之前是全局引入)，如下所示：

 @use "static/styles/common.scss" as *;
 

2，换一种深度选择器写法，如下所示：

 .main{
  & ::deep .el-button{
    background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
    &:hover{
      opacity: 0.8;
    }
  }
}
 

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；END

PS：在本页按F12，在console中输入document.querySelectorAll('.diggit')[0].click()，有惊喜哦

公众号

往期文章

Vue2全家桶+Element搭建的PC端在线音乐网站 超详细的Cookie增删改查 助你上手Vue3全家桶之Vue-Router4教程 助你上手Vue3全家桶之Vue3教程 助你上手Vue3全家桶之VueX4教程 使用nvm管理node.js版本以及更换npm淘宝镜像源 超详细！Vue-Router手把手教程 超详细！Vue的九种通信方式 超详细！Vuex手把手教程

个人主页

CSDN GitHub 简书 博客园 掘金

查看更多关于jsx/tsx使用cssModule和typescript-plugin-css-modules的详细内容...