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 {}

issues地址

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(),有惊喜哦


公众号

往期文章

个人主页

jsx/tsx使用cssModule和typescript-plugin-css-modules的更多相关文章

  1. [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 ...

  2. 在React中使用CSS Modules设置样式

    最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...

  3. css模块化及CSS Modules使用详解

    什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...

  4. 转 : CSS Modules详解及React中实践

    https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...

  5. CSS Modules入门及React中实践(内附webpack4配置)

    本篇文章以整理为主,自己进行了部分修改,如有侵权,请告知 CSS Modules介绍 CSS Modules是什么东西呢?首先,让我们从官方文档入手:GitHub – css-modules/css- ...

  6. CSS Modules使用方法

    css modules调研 css模块化解决方案 抛弃css (Radium,jsxstyle,react-style) 利用js来管理样式依赖(css Modules) css模块化面临的问题 全局 ...

  7. 在Angular1.X中使用CSS Modules

    在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...

  8. CSS modules 与 React中实践

    最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...

  9. Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

随机推荐

  1. JavaScript 数据结构与算法1(数组与栈)

    学习数据结构的 git 代码地址: https://gitee.com/zhangning187/js-data-structure-study 1.数组 几乎所有的语言都原生支持数组类型,因为数组是 ...

  2. 使用NFS作为Glance存储后端

    NFS服务介绍 NFS网络文件系统提供了一种在类UNIX系统上共享文件的方法.目前NFS有3个版本:NFSv2.NFSv3.NFSv4.CentOS7默认使用NFSv4提供服务,优点是提供了有状态的连 ...

  3. Change Buffer 只适用于非唯一索引页?错

    最近在网上看到一些文章里说:"change buffer 只适用于非唯一索引页."其实这个观点是错的,先来看看官方文档对 change buffer 的介绍: 文档地址:https ...

  4. CF 1015F

    题意:[CF 1015F](https://codeforces.com/contest/1015/problem/F) 给你一个模式串A(一个不一定合法的括号序列),让你构造长度为2*n的合法括号序 ...

  5. 【Java面试】数据库连接池有什么用?它有哪些关键参数?

    一个工作5年的粉丝找到我,他说参加美团面试,遇到一个基础题没回答上来. 这个问题是:"数据库连接池有什么用?以及它有哪些关键参数"? 我说,这个问题都不知道,那你项目里面的连接池配 ...

  6. Opentelemetry SDK的简单用法

    Opentelemetry SDK的简单用法 概述 Opentelemetry trace的简单架构图如下,客户端和服务端都需要启动一个traceProvider,主要用于将trace数据传输到reg ...

  7. 【Java面试】Kafka 怎么避免重复消费

    Hi,大家好,我是Mic 一个工作5年的粉丝找到我. 他说: "Mic老师,你要是能回答出这个问题,我就佩服你" 我当场就懵了,现在打赌都这么随意了吗? 我问他问题是什么,他说&q ...

  8. 使用MySqlBulkLoader批量插入数据

    最近在项目中遇到插入几万.几十万.几百万的数据到MYSQL数据库,使用EF插入会发现插入速度非常慢的场景, 数据量非常大时EF插入需要几十分钟,甚至几个小时,这样子的速度肯定不是我们所期望的. 后面经 ...

  9. MOEAD实现、基于分解的多目标进化、 切比雪夫方法-(python完整代码)

    确定某点附近的点 答:每个解对应的是一组权重,即子问题,红点附近的四个点,也就是它的邻居怎么确定呢?由权重来确定,算法初始化阶段就确定了每个权重对应的邻居,也就是每个子问题的邻居子问题.权重的邻居通过 ...

  10. netty系列之:在netty中使用native传输协议

    目录 简介 native传输协议的依赖 netty本地传输协议的使用 总结 简介 对于IO来说,除了传统的block IO,使用最多的就是NIO了,通常我们在netty程序中最常用到的就是NIO,比如 ...