vue3+ts jsx写法css module处理方案 |
您所在的位置:网站首页 › 样式样式 › vue3+ts jsx写法css module处理方案 |
关于vue3与jsx(tsx)写法自己了解哦,也可以看博主之前的博客。 css带有全局性,当我们的项目复杂到一定程度的时候,css文件会很多,如果像传统的引入方式,那么这些css文件都会全局生效,难免会照成样式冲突。 这时候就需要对样式进行模块化,就是一个样式文件只对一个组件产生作用。vue已经提供了scoped解决方案,当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。 相信scoped这个写法大家都非常熟悉,下面是它的实现原理: 转译前: .example{ color:red; } scoped测试案例转译后: .example[data-v-5558831a] { color: red; } scoped测试案例这个方式非常简单也是最常用的,但是有个局限性,就是只能作用于vue文件。 当我想使用jsx写法编写组件的时候,无法使用scoped这个用法,因为jsx等同于一个js文件,里面可写不了template与style标签。那么当我想使用一个样式文件的时候,就类似于下面这样: test.tsx文件 import { defineComponent } from 'vue' import './test.scss' export default defineComponent({ setup () { return () => { return } } })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 } } })如果你跟我一样使用的是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非常好用! 我是鸭子,祝你幸福。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |