關于vue3與jsx(tsx)寫法自己了解哦,也可以看博主之前的博客。
css帶有全局性,當我們的項目復雜到一定程度的時候,css文件會很多,如果像傳統的引入方式,那么這些css文件都會全局生效,難免會照成樣式沖突。
這時候就需要對樣式進行模塊化,就是一個樣式文件只對一個組件產生作用。vue已經提供了scoped
解決方案,當一個style
標簽擁有scoped
屬性時候,它的css樣式只能用于當前的Vue組件,可以使組件的樣式不相互污染。如果一個項目的所有style
標簽都加上了scoped
屬性,相當于實現了樣式的模塊化。
相信scoped
這個寫法大家都非常熟悉,下面是它的實現原理:
轉譯前:
<style scoped>
.example{
color:red;
}
</style>
<template>
<div>scoped測試案例</div>
</template>
轉譯后:
.example[data-v-5558831a] {
color: red;
}
<template>
<div class="example" data-v-5558831a>scoped測試案例</div>
</template>
這個方式非常簡單也是最常用的,但是有個局限性,就是只能作用于vue文件。
當我想使用jsx寫法編寫組件的時候,無法使用scoped
這個用法,因為jsx等同于一個js文件,里面可寫不了template
與style
標簽。那么當我想使用一個樣式文件的時候,就類似于下面這樣:
test.tsx文件
import { defineComponent } from 'vue'
import './test.scss'
export default defineComponent({
setup () {
return () => {
return <div class="test">
</div>
}
}
})
test.scss文件:
.test {
width: 100px;
height: 100px;
background: rebeccapurple;
}
這樣樣式確實能夠作用到div上,但是當我們看網頁代碼的時候:
可以看到這個樣式文件會掛載到全局的
style
標簽上,且類名沒有任何轉譯,這樣就會容易造成樣式污染。
解決方案就是css module
,vue對于樣式除了scoped
這種方案其實還有css module
,可能大家平時用得也比較少(反正我沒用過),因為vue文件使用scoped
實在是太方便而且已經滿足需求。
css module文檔
vue cli已經集成了,我們都可以直接使用。
那么,在jsx文件中該如何使用呢,我們需要改一下項目配置:
在vue.config.js中,添加:
module.exports = {
css: {
requireModuleExtension: true
}
}
關于requireModuleExtension
的作用,看這里:https://cli.vuejs.org/zh/config/#configurewebpack
然后將上面的test.scss文件改名,更改為test.module.scss:
回到test.tsx文件中,將引入的方式修改:
import { defineComponent } from 'vue'
import styles from './test.module.scss'
export default defineComponent({
setup () {
return () => {
return <div class={styles.test}>
</div>
}
}
})
如果你跟我一樣使用的是ts,那么from一個scss文件的時候會報錯,因為ts不識別這類文件的定義,我們需要到src文件夾下的shims-vue.d.ts中添加一項:
declare module "*.scss" {
const classes: { readonly [key: string]: string };
export default classes;
}
定義了scss文件的類型,如果你是css、less、stylus這些樣式的話,把上面的scss改成你們的樣式文件后綴就可以。
好了,現在來看一下效果:
可以看到css module會自動將我們類名進行轉譯,避免了全局污染。
如果你跟我一樣使用ts,使用vscode,那么還有更厲害的,類名自動提示!!!
首先安裝typescript-plugin-css-modules
npm install typescript-plugin-css-modules --save-dev
然后ts開啟這個插件,到項目下的tsconfig.json中,在compilerOptions
屬性下添加:
"plugins": [{"name": "typescript-plugin-css-modules"}]
最后一步,配合vscode,在項目根目錄上創建.vscode文件夾,添加settings.json文件:
在settings.json中,添加:
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
效果:
非常好用!
我是鴨子,祝你幸福。