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文件，里面可写不了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上，但是当我们看网页代码的时候：

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

非常好用！

我是鸭子，祝你幸福。