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 的版本讲 ...
随机推荐
- vue - Vue脚手架/消息订阅与发布
今天的内容有意思了,朋友们继续对我们之前的案例完善,是这样的我们之前是不是靠props来完成父给子,子给父之间传数据,其实父给子最好的方法就是props但是自给父就不是了,并且今天学下来,不仅如此,组 ...
- 一次 HTTP 请求就需要一次 TCP 连接吗?
一次 HTTP 请求就需要一次 TCP 连接吗? 本文写于 2021 年 2 月 9 日 太长不看版本:短连接需要,长连接不需要. 一次 HTTP 请求就需要一次 TCP 连接吗? TCP 的连接与断 ...
- Oceanbase读写分离方案探索与优化
[作者] 许金柱,携程资深DBA,专注于分布式数据库研究及运维. 台枫,携程高级DBA,主要负责MySQL和OceanBase的运维. [前言] 读写分离,是一种将数据库的查询操作和写入操作分离 ...
- Ajax——Get请求
Get.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- pymysql.err.OperationalError: (1054, "Unknown column 'aa' in 'field list'")(已解决)
错误描述: 今天使用python连接mysql数据库进行数据添加时,出现报错"pymysql.err.OperationalError: (1054, "Unknown colum ...
- [C++STL] set 容器的入门
set 容器的入门 unordered_set:另外头文件,乱序排放,使用哈希表(便于查找) multiset:可以重复存在的集合.用count()读取个数 创建set的几种方式 常规 set< ...
- 深度学习可视化工具--tensorboard的使用
tensorboard的使用 官方文档 # writer.add_scalar() # 添加标量 """ Args: tag (string): Data identif ...
- pip下载更改为清华镜像
step1: + 在user(用户)下新建一文件夹再在该文件夹下新建pip.ini文件 + 例如:user/pip/pip.ini + tips:如果未打开在查看里的隐藏扩展名记得打开 step2: ...
- SpringSecurity的 loginProcessingUrl为什么不能用
前情提要: 我在做一个springsecurity动态鉴权的项目时, 据网上说配置了 loginProcessingUrl("/login1"); 以后 就可以自定义login的请 ...
- 关于基础RMQ——ST算法
RMQ,Range Maximum/Minimum Query,顾名思义,就是询问某个区间内的最大值或最小值,今天我主要记录的是其求解方法--ST算法 相对于线段树,它的运行速度会快很多,可以做到O( ...