当前位置: 首页 > 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算法&#…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...