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變?yōu)?.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，插件錯誤處理

截止本文發(fā)布之時，typescript-plugin-css-modules的版本為3.4.0，此插件有一個bug，會導致cssModule類型提取失敗，模塊類型是一個{}的情況，如下所示：

Property '<specific class name>' does not exist on type {}

出錯

issues地址

5.1，錯誤觸發(fā)原因

這個bug目前有兩個方式都會觸發(fā)：

• 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;
    }
  }
}

如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點贊 關注 評論；
END

PS：在本頁按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦

往期文章

• 超詳細的Cookie增刪改查
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue3教程
• 超詳細！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 超詳細！Vue-Router手把手教程
• vue中利用.env文件存儲全局環(huán)境變量，以及配置vue啟動和打包命令
• 微信小程序實現(xiàn)搜索關鍵詞高亮

個人主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金