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 的版本讲 ...
随机推荐
- JavaScript 数据结构与算法1(数组与栈)
学习数据结构的 git 代码地址: https://gitee.com/zhangning187/js-data-structure-study 1.数组 几乎所有的语言都原生支持数组类型,因为数组是 ...
- 使用NFS作为Glance存储后端
NFS服务介绍 NFS网络文件系统提供了一种在类UNIX系统上共享文件的方法.目前NFS有3个版本:NFSv2.NFSv3.NFSv4.CentOS7默认使用NFSv4提供服务,优点是提供了有状态的连 ...
- Change Buffer 只适用于非唯一索引页?错
最近在网上看到一些文章里说:"change buffer 只适用于非唯一索引页."其实这个观点是错的,先来看看官方文档对 change buffer 的介绍: 文档地址:https ...
- CF 1015F
题意:[CF 1015F](https://codeforces.com/contest/1015/problem/F) 给你一个模式串A(一个不一定合法的括号序列),让你构造长度为2*n的合法括号序 ...
- 【Java面试】数据库连接池有什么用?它有哪些关键参数?
一个工作5年的粉丝找到我,他说参加美团面试,遇到一个基础题没回答上来. 这个问题是:"数据库连接池有什么用?以及它有哪些关键参数"? 我说,这个问题都不知道,那你项目里面的连接池配 ...
- Opentelemetry SDK的简单用法
Opentelemetry SDK的简单用法 概述 Opentelemetry trace的简单架构图如下,客户端和服务端都需要启动一个traceProvider,主要用于将trace数据传输到reg ...
- 【Java面试】Kafka 怎么避免重复消费
Hi,大家好,我是Mic 一个工作5年的粉丝找到我. 他说: "Mic老师,你要是能回答出这个问题,我就佩服你" 我当场就懵了,现在打赌都这么随意了吗? 我问他问题是什么,他说&q ...
- 使用MySqlBulkLoader批量插入数据
最近在项目中遇到插入几万.几十万.几百万的数据到MYSQL数据库,使用EF插入会发现插入速度非常慢的场景, 数据量非常大时EF插入需要几十分钟,甚至几个小时,这样子的速度肯定不是我们所期望的. 后面经 ...
- MOEAD实现、基于分解的多目标进化、 切比雪夫方法-(python完整代码)
确定某点附近的点 答:每个解对应的是一组权重,即子问题,红点附近的四个点,也就是它的邻居怎么确定呢?由权重来确定,算法初始化阶段就确定了每个权重对应的邻居,也就是每个子问题的邻居子问题.权重的邻居通过 ...
- netty系列之:在netty中使用native传输协议
目录 简介 native传输协议的依赖 netty本地传输协议的使用 总结 简介 对于IO来说,除了传统的block IO,使用最多的就是NIO了,通常我们在netty程序中最常用到的就是NIO,比如 ...