交互式网站有哪些功能,百度站长网站文件验证,做网站网络,门户网站建设方案 模板11. Vite 配置文件中 CSS 配置#xff08;Modules 模块化篇#xff09;
由于课程讲的是 vite2 版本#xff0c;所以我阅读了 vite6 中的文档#xff0c;下面将结合 css.modules 的接口进行讲解
CSSModulesOptions 接口文档
interface CSSModulesOptions {/*** 用户可以自…11. Vite 配置文件中 CSS 配置Modules 模块化篇
由于课程讲的是 vite2 版本所以我阅读了 vite6 中的文档下面将结合 css.modules 的接口进行讲解
CSSModulesOptions 接口文档
interface CSSModulesOptions {/*** 用户可以自定义一个回调函数来处理生成的 JSON 文件。* 该回调函数接受三个参数* - cssFileName: 当前处理的 CSS 文件名* - json: 生成的类名与哈希值的映射对象* - outputFileName: 生成的 CSS 文件的输出路径*/getJSON?: (cssFileName: string,json: Recordstring, 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的样式进行处理确保项目中的样式兼容性和可维护性。
