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洽沟，會導(dǎo)致cssModule類型提取失敗，模塊類型是一個{}的情況蜗细，如下所示：
Property '<specific class name>' does not exist on type {}
5.1裆操，錯誤觸發(fā)原因
這個bug目前有兩個方式都會觸發(fā)：
1，當(dāng)你項目中使用
less/scss的@include/@mixin等等指令的時候2炉媒，當(dāng)你的項目使用
/ 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鸭巴，歡迎 點贊 關(guān)注 評論眷细；
END
PS：在本頁按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()鹃祖，有驚喜哦
往期文章
- 超詳細(xì)的Cookie增刪改查
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue3教程
- 超詳細(xì)溪椎！Vuex手把手教程
- 使用nvm管理node.js版本以及更換npm淘寶鏡像源
- 超詳細(xì)！Vue-Router手把手教程
- vue中利用.env文件存儲全局環(huán)境變量惯豆，以及配置vue啟動和打包命令
- 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮
個人主頁
