Vite笔记之09-vite.config.js 中css配置（module篇）1. vite处理css的配置 vite

1. vite处理css的配置

vite.config.js 中我们通过css属性去控制整个vite对于css的处理行为,vite中的css modules会最终给postcss进行处理。

localConvention:修改生成的配置对象的key的展示形式(驼峰还是中划线形式)

第一种：camelCase

第二种：camelCaseOnly（去除dash的）

scopeBehaviour: 配置当前的模块化行为是模块化还是全局化 (有hash就是开启了模块化的一个标志, 因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖) global、local（开启模块化）
generateScopedName: 生成的类名的规则(可以配置为函数, 也可以配置成字符串规则: github.com/webpack/loa…
hashPrefix: 生成hash会根据你的类名
- 添加一些其他的字符串(文件名 + 他内部随机生成一个字符串)去进行生成, 如果你想要你生成hash更加的独特一点, 你可以配置hashPrefix, 你配置的这个字符串会参与到最终的hash生成, （hash: 只要你的字符串有一个字不一样, 那么生成的hash就完全不一样, 但是只要你的字符串完全一样, 生成的hash就会一样）
globalModulePaths: 代表你不想参与到css模块化的路径，以.module.css命名，数组：[]

2. 配置说明

vite.config.js 具体配置说明：

css:对css的行为进行配置
- modules: 是对css模块化的默认行为进行覆盖
  - localsConvention:修改生成的配置对象的key的展示形式(驼峰还是中划线形式)
  - scopeBehaviour:配置当前的模块化行为是模块化还是全局化 (有hash就是开启了模块化的一个标志, 因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖)
  - generateScopedName:文件中的类名,配置成函数以后, 返回值就决定了他最终显示的类型
  - hashPrefix:// 生成hash会根据你的类名 + 一些其他的字符串(文件名 + 他内部随机生成一个字符串)去进行生成, 如果你想要你生成hash更加的独特一点, 你可以配置hashPrefix, 你配置的这个字符串会参与到最终的hash生成, （hash: 只要你的字符串有一个字不一样, 那么生成的hash就完全不一样, 但是只要你的字符串完全一样, 生成的hash就会一样）
  - globalModulePaths:代表你不想参与到css模块化的路径

css: {  
        // modules配置最终会丢给postcss modules
        modules: {  
            localsConvention: "camelCaseOnly",
            scopeBehaviour: "local",
            // generateScopedName: "[name]_[local]_[hash:5]" // <https://github.com/webpack/loader-utils#interpolatename>
            // generateScopedName: (name, filename, css) => {
            //     // name -> 代表的是你此刻css文件中的类名
            //     // filename -> 是你当前css文件的绝对路径
            //     // css -> 给的就是你当前样式
            //     console.log("name", name, "filename", filename, "css", css); // 这一行会输出在哪？？？ 输出在node
            //     // 配置成函数以后, 返回值就决定了他最终显示的类型
            //     return `${name}_${Math.random().toString(36).substr(3, 8) }`;
            // }
            hashPrefix: "hello", 
            globalModulePaths: ["./componentB.module.css"], 
        },
}