当前位置: 首页 > news >正文

Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)

11. Vite 配置文件中 CSS 配置(Modules 模块化篇)

由于课程讲的是 vite2 版本,所以我阅读了 vite6 中的文档,下面将结合 css.modules 的接口进行讲解

CSSModulesOptions 接口文档

interface CSSModulesOptions {/*** 用户可以自定义一个回调函数,来处理生成的 JSON 文件。* 该回调函数接受三个参数:*  - cssFileName: 当前处理的 CSS 文件名*  - json: 生成的类名与哈希值的映射对象*  - outputFileName: 生成的 CSS 文件的输出路径*/getJSON?: (cssFileName: string,json: Record<string, string>,outputFileName: string,) => void;/*** 定义 CSS Modules 的作用域行为* - 'local':启用 CSS Modules,生成的类名会进行哈希化并作用于当前模块。* - 'global':禁用 CSS Modules,所有类名都将是全局的,不会进行哈希化。*/scopeBehaviour?: 'global' | 'local';/*** 定义哪些 CSS 文件路径需要被视为全局样式,不应用 CSS Modules。* 可以传入一个正则表达式数组,匹配路径中符合规则的文件。*/globalModulePaths?: RegExp[];/*** 如果为 `true`,会导出所有的全局类名,即使在使用 CSS Modules 时,也会把它们暴露为全局类。* 默认为 `false`,不会导出全局类名。*/exportGlobals?: boolean;/*** 定义生成的 CSS 类名的格式,可以是一个字符串模板,也可以是一个函数。* 字符串模板的格式通常为 `[name]__[local]___[hash:base64:5]`,其中:* - `[name]` 是文件名(不含扩展名)* - `[local]` 是原始的 CSS 类名* - `[hash:base64:5]` 是文件内容的哈希值,长度为 5** 如果传入函数,它接受三个参数,允许你根据文件名、类名及 CSS 内容来生成类名。*/generateScopedName?:| string| ((name: string, filename: string, css: string) => string);/*** 为生成的类名哈希值添加一个前缀,用于避免不同项目之间的哈希冲突。*/hashPrefix?: string;/*** 控制类名在 JS 对象中的转换方式:* - 'camelCase':将 CSS 类名转为 camelCase 格式(例如 `my-class` 转为 `myClass`)* - 'camelCaseOnly':与 'camelCase' 类似,但如果类名原本就是 camelCase 格式,则保持不变。* - 'dashes':将 CSS 类名保持为短横线分隔格式(例如 `my-class` 转为 `my-class`)* - 'dashesOnly':与 'dashes' 类似,但如果类名已经是短横线格式,则保持不变。* * 还可以传入一个函数,允许你自定义转换规则,函数接收三个参数:* - `originalClassName`: 原始 CSS 类名* - `generatedClassName`: 生成的类名* - `inputFile`: 当前处理的文件路径*/localsConvention?:| 'camelCase'| 'camelCaseOnly'| 'dashes'| 'dashesOnly'| (originalClassName: string,generatedClassName: string,inputFile: string,) => string;
}

完整配置示例:

export default {css: {modules: {getJSON(cssFileName, json, outputFileName) {console.log('Generated CSS JSON:', json)},scopeBehaviour: 'local', // 使用 CSS ModulesglobalModulePaths: [/\.global\.css$/], // 匹配全局 CSS 文件exportGlobals: true, // 导出全局类名generateScopedName: '[name]__[local]__[hash:base64:5]', // 类名格式hashPrefix: 'viteApp_', // 哈希前缀localsConvention: 'camelCase' // 驼峰命名类名}}
}

vite6 中 css modules 最新配置共享选项

11.1.1. 总结

Vite 提供了灵活的 CSS 模块化配置选项,可以帮助开发者在处理 CSS 时避免样式冲突,并根据项目的需求定制类名生成规则。同时,Vite 还支持对外部库(如 node_modules)的样式进行处理,确保项目中的样式兼容性和可维护性。


相关文章:

Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)

11. Vite 配置文件中 CSS 配置&#xff08;Modules 模块化篇&#xff09; 由于课程讲的是 vite2 版本&#xff0c;所以我阅读了 vite6 中的文档&#xff0c;下面将结合 css.modules 的接口进行讲解 CSSModulesOptions 接口文档 interface CSSModulesOptions {/*** 用户可以自…...

Everspin代理MR25H10CDFR存储MRAM

RAMSUN提供的MR25H10CDFR是一款具备1,048,576位存储容量的磁阻随机存取存储器&#xff08;MRAM&#xff09;设备&#xff0c;由131,072个8位字构成。该设备提供与串行EEPROM和串行闪存兼容的读/写时序&#xff0c;无写延迟&#xff0c;并且其读/写寿命是不受限制的。 与其它串…...

cesium小知识:使用 EntityCollection的方法

EntityCollection 是 Cesium 中用于管理一组 Entity 的集合对象。它提供了一种高效的方式来批量添加、移除和操作多个实体,同时支持事件监听,以便在集合中的实体发生变化时执行特定的逻辑。 下面是如何使用 EntityCollection 的一些基本指导: 创建 EntityCollection 当你…...

Java 日志类库

Java 日志库是最能体现 Java 库在进化中的渊源关系的&#xff0c;在理解时重点理解日志框架本身和日志门面&#xff0c;以及比较好的时间等。要关注其历史渊源和设计&#xff08;比如桥接&#xff09;&#xff0c;而具体在使用时查询接口即可&#xff0c;否则会陷入 JUL&#x…...

【Unity3D】Particle粒子特效或3D物体显示在UGUI上的方案

目录 一、RawImage Camera RenderTexture方式 &#xff08;1&#xff09;扩展知识&#xff1a;实现射线检测RawImage内的3D物体 &#xff08;2&#xff09;扩展知识&#xff1a;实现粒子特效显示RawImage上 二、UI摄像机 Canvas(Screen Space - Camera模式)方式 &#…...

有没有检测吸烟的软件 ai视频检测分析厂区抽烟报警#Python

在现代厂区管理中&#xff0c;安全与规范是重中之重&#xff0c;而吸烟行为的管控则是其中关键一环。传统的禁烟管理方式往往依赖人工巡逻&#xff0c;效率低且存在监管死角&#xff0c;难以满足当下复杂多变的厂区环境需求。此时&#xff0c;AI视频检测技术应运而生&#xff0…...

《鸣潮》游戏运行时弹出“xinput1_3.dll文件缺失”错误的处理方法,“xinput1_3.dll文件缺失”详解!

一、xinput1_3.dll文件的重要性 xinput1_3.dll是DirectX组件中的一个重要文件&#xff0c;它负责处理与Xbox 360控制器相关的输入功能。尽管《鸣潮》可能并不直接依赖于Xbox控制器&#xff0c;但许多现代游戏和应用程序都会调用这个DLL文件来处理各种输入设备的功能。因此&…...

大模型应用—HivisionIDPhotos 证件照在线制作!支持离线、换装、美颜等

HivisionIDPhotos 证件照在线制作!支持离线、换装、美颜等 ivisionIDPhotos 是一款功能强大的开源证件照生成工具。用户只需上传一张人像照片,它就能智能裁剪为一寸、两寸等标准尺寸,同时自动去除背景并渲染新的背景颜色,例如蓝色、白色、红色,还支持渐变色和自定义颜色。…...

解决Ubuntu下无法装载 Windows D盘的问题

电脑安装了 Windows 和 Ubuntu 24.04 后&#xff0c;在Ubuntu系统上装载 D盘&#xff0c;发现无法装载错误如下&#xff1a; Error mounting /dev/nvme0n1p4 at /media/jackeysong/Data: wrong fs type, bad option, bad superblock on /dev/nvme0n1p4, missing codepage or h…...

一体成型电感

一体成型电感是通过铁粉模压成型而成的同封装条件下实现更大的额定电流&#xff0c;且更适合批量自动化生产&#xff0c;较传统绕线电感有成本优势。同时&#xff0c;一体成型电感与磁封胶结构电感相比具有更好的磁屏蔽效果&#xff0c;适合EMI无法调试通过的项目使用。 但一体…...

Reed-Muller(RM)码之编码

点个关注吧! 看了一些中文的博客,RM码没有很详细的资料,所以本文尝试给出推导原理。 推导 RM码由 ( r , m ) ( r , m ) (r,m...

【蓝桥杯——物联网设计与开发】基础模块8 - RTC

目录 一、RTC &#xff08;1&#xff09;资源介绍 &#x1f505;简介 &#x1f505;时钟与分频&#xff08;十分重要‼️&#xff09; &#xff08;2&#xff09;STM32CubeMX 软件配置 &#xff08;3&#xff09;代码编写 &#xff08;4&#xff09;实验现象 二、RTC接口…...

聚类算法DBSCAN 改进总结

目录 DBSCAN(Density-Based Spatial Clustering of Applications with Noise) 1. HDBSCAN (Hierarchical DBSCAN) 优点: 安装: 使用实例1 效果失败 使用实例2 3. DBSCAN++ (DBSCAN with Preprocessing) 4. DBSCAN with k-distance 5. Density Peaks Clustering (DP…...

uniapp开发微信小程序实现获取“我的位置”

1. 创建GetLocation项目 使用HBuilder X创建一个项目GetLocation,使用Vue3。 2. 在腾讯地图开放平台中创建应用 要获取位置,在小程序中需要使用腾讯地图或是高德地图。下面以腾讯地图为例。 (1)打开腾讯地图开放平台官方网址:腾讯位置服务 - 立足生态,连接未来 (2)注册…...

java中两个系统进行非对称加密,两个系统的公私钥可以用一套吗?

在非对称加密中&#xff0c;每个参与方应该拥有自己独立的一套公钥和私钥。非对称加密的基础在于公钥和私钥的配对使用&#xff1a;一个密钥用于加密信息&#xff0c;则另一个对应的密钥用于解密信息。具体来说&#xff1a; 如果A要发送一条保密消息给B&#xff0c;那么A会使用…...

无人设备遥控器之定向天线篇

一、定义与功能 定向天线&#xff0c;顾名思义&#xff0c;是通过改变天线的辐射方向&#xff0c;实现信号发射、接收和增强的天线。它可以让信号以更高的功率、更远的距离传输到指定区域&#xff0c;同时也能够降低与周围天线之间的干扰。在无人设备遥控器中&#xff0c;定向天…...

【电路笔记 信号】Metastability 平均故障间隔时间(MTBF)公式推导:进入亚稳态+退出亚稳态+同步器的可靠性计算

这是一个简化的电路分析模型。图2中的典型触发器包括主锁存器、从锁存器和去耦反相器(这个结构类似 主从边沿触发器)。 在亚稳态中&#xff0c;主锁存器的节点A、B的电压电平大致在逻辑“1”&#xff08;VDD&#xff09;和“0”&#xff08;GND&#xff09;之间。确切的电压电平…...

计算机视觉:原理、分类与应用

计算机视觉是当今科技领域中一个至关重要的分支&#xff0c;它赋予了计算机通过视觉感知和理解世界的能力。简单来说&#xff0c;计算机视觉实现了对图像、视频等视觉数据的分析、处理、识别和理解。这是一个跨学科的研究领域&#xff0c;涉及计算机科学、信息工程、数学、物理…...

Vue.js组件开发-使用watch进行深度观察

在Vue.js中&#xff0c;watch选项允许观察和响应Vue实例上数据的变化。当需要对某个数据属性进行深度观察&#xff0c;即在其内部嵌套的对象或数组发生变化时也能触发回调时&#xff0c;可以使用deep选项。 示例&#xff1a; new Vue({el: #app,data: {user: {name: John,age…...

明厨亮灶系统

校园食堂明厨亮灶AI分析系统通过yolov5网络模型技术&#xff0c;校园食堂明厨亮灶监控分析系统针对校园餐厅后厨不按要求戴口罩、不穿厨师帽、陌生人员进入后厨、厨师不穿厨师服、上班时间玩手机、老鼠识别等行为校园食堂明厨亮灶监控分析系统自动识别抓拍告警。Yolo算法&#…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...