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手把手教程
个人主页
jsx/tsx使用cssModule和typescript-plugin-css-modules的更多相关文章
- [Webpack + React] Import CSS Modules with TypeScript and webpack
If you try to use CSS Modules in TypeScript the same way you would use them in JavaScript, with webp ...
- 在React中使用CSS Modules设置样式
最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...
- css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
- 转 : CSS Modules详解及React中实践
https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...
- CSS Modules入门及React中实践(内附webpack4配置)
本篇文章以整理为主,自己进行了部分修改,如有侵权,请告知 CSS Modules介绍 CSS Modules是什么东西呢?首先,让我们从官方文档入手:GitHub – css-modules/css- ...
- CSS Modules使用方法
css modules调研 css模块化解决方案 抛弃css (Radium,jsxstyle,react-style) 利用js来管理样式依赖(css Modules) css模块化面临的问题 全局 ...
- 在Angular1.X中使用CSS Modules
在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...
- CSS modules 与 React中实践
最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...
- Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
随机推荐
- OpenHarmony 3GPP协议开发深度剖析——一文读懂RIL
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点)本文转载自:https://harmonyos.51cto.com/posts/10608 夏德旺 软通动力信息技术(集 ...
- PHP代码审计之SQL注入
代码审计之SQL注入 SQL注入攻击(SQLInjection),是攻击者在表单中提交精心构造的sql语句,改变原来的sql语句,如果web程序没有对提交的数据经过检查,那么就会造成sql注入攻击. ...
- Python 散列表查询_进入<哈希函数>为结界的世界
1. 前言 哈希表或称为散列表,是一种常见的.使用频率非常高的数据存储方案. 哈希表属于抽象数据结构,需要开发者按哈希表数据结构的存储要求进行 API 定制,对于大部分高级语言而言,都会提供已经实现好 ...
- java高级用法之:绑定CPU的线程Thread-Affinity
目录 简介 Java Thread Affinity简介 AffinityLock的使用 使用API直接分配CPU 总结 简介 在现代计算机系统中,可以有多个CPU,每个CPU又可以有多核.为了充分利 ...
- Hadoop安装学习(第二天)
学习任务: 1.对VMnet8进行设置 2.配置主机名,对host文件进行编辑 3.将Hadoop文件以及jdk通过Xshell7传输到Linux系统 4.设置免密登录
- python文件操作拓展与认识函数
目录 文件内光标的移动(了解即可) 前言 控制光标移动seek()方法 文件的修改 函数 语法结构 简单的使用 作业 答案 文件内光标的移动(了解即可) 前言 在文件的内置方法中,read()方法是可 ...
- OI中组合数学公式和定理90%歼灭
组合数学 基础概念 加法和乘法原理 加法原理 同一步下的不同选择,可以通过累加得到方案数. 乘法原理 整个流程的方案数可以由每一步的方案数相乘得到. 有了加法原理和乘法原理,就可以解决一些没有选择导致 ...
- Ceph集群搭建记录
环境准备 基础环境 node00 192.168.247.144 node00 node01 192.168.247.135 node01 node02 192.168.247.143 node02 ...
- 攻防世界pwn题:实时数据检测
0x00:查看文件 一个32位的文件,canary.NX.PIE保护机制均关闭. 0x01:用IDA进行静态分析 程序很简单,输入一串字符(个数限制:512),然后再输出.最后根据key变量进行条件语 ...
- SAP 实例 8 HTML from the MIME Repository
REPORT demo_html_from_mime. CLASS mime_demo DEFINITION. PUBLIC SECTION. CLASS-METHODS main. PRIVATE ...