jsx/tsx使用cssModule和typescript-plugin-css-modules
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 {}
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手把手教程
個人主頁
