vue3+ts jsx寫法css module處理方案

關于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文件,里面可寫不了templatestyle標簽。那么當我想使用一個樣式文件的時候,就類似于下面這樣:
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上,但是當我們看網頁代碼的時候:

image.png

可以看到這個樣式文件會掛載到全局的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:

image.png

回到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改成你們的樣式文件后綴就可以。

好了,現在來看一下效果:


image.png

可以看到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文件:

image.png

在settings.json中,添加:

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

效果:


image.png

非常好用!

我是鴨子,祝你幸福。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容