浅析在vite中如何处理css

vite中的默认特性

vite是天然支持css的

我们在工程中新建a.js文件，引入a.css文件

看下返回值和响应头

当浏览器请求css资源时，vite服务器默认会将对应的css解析成js代码返回 ，将对应的css代码copy到style标签里并插入html头部

这里和webpack 的css-loader和style-loader是类似的，不同的是vite是在浏览器发出请求时才会做出这样的行为返回这样的内容，而webpack是一开始就会将对应的文件编译并将该部分代码嵌入到一个bundle中供浏览器加载。

为什么vite要将其解析成js代码呢？

• 方便热更新
• 方便做css模块化

vite中的css模块化

新建b.js 和 b.css

入口处先引入a.js 再引入 b.js

发现b.css的style是后插入的，相同类名覆盖掉了a.css,要想解决这个问题，我们就要引入css模块化的概念

将a.css和b.css后缀改为a.module.css和b.module.css当成模块来引入并使用类名

很明显不同模块下的相同类名都被处理增加后缀了，样式并没有冲突，两个盒子分别对应两个类名

看下被vite处理过的css文件

很明显解析成的js代码具有导出功能 ，并对类名进行处理

打印一下a.js中导入的对象

总结一下
.mocule.css相当于一种约定 ，表示启用css模块化

• 原本css部分的类名会被替换带有hash后缀的类名
• 对应模块内部会导出一个映射对象，key 是原本我们起的类名，比如my-div，value 是被替换后带有hash后缀的类名，比如._my-div_4u4xp_1。通过module[key]的形式就取到了替换后的类名

vite中内置postcss

vite中是天然内置postcss的，不过预设配置 (插件)还是需要我们手动添加配置的
yarn add postcss-preset-env -D

    // postcss.config.js
    const postCssPresetEnv = require('postcss-preset-env')
    module.exports = {
        plugins: [postCssPresetEnv()]
    }

vite添加预处理器

vite中虽然天然支持css，但是预处理器还是需要我们手动添加配置的，比如less
yarn add less -D

import { defineConfig } from "vite"
export default defineConfig({
    ...
    css: {
        // 对预处理器的一些配置 less scss
        preprocessorOptions: {
            less: {  // 可以做一些配置参数   webpack可以在less-loader中配置
                math: 'always',
                globalVars: {
                    contenColor: 'red', // 全局变量
                }
            }
        }
    }
    ...
})    

vite中关于css的配置

上面都是一些vite默认支持的一些特性，比如天然支持css,css模块化,postcss，如果我们想改变一些默认的特性可以通过vite.config.js

import { defineConfig } from "vite"
// const postCssPresetEnv = require('postcss-preset-env')
export default defineConfig({
  ...
	css: {
		// modules的配置会传递给postcss modules
		modules: {
			localsConvention: 'dashes',  // 修改cssModule映射对象key的展示形式(中划线，驼峰) 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
			scopeBehaviour: 'local',  // local正常模块化，类名带hash；global 全局模块化类名不带hash，引入的映射对象是空的
			generateScopedName: '[name]_[local]_[hash:5]', // 转换后的类名  映射对象的value值
			hashPrefix: 'hello',  // 参与hash值的构成
			globalModulePaths: ['./style/b.module.css'] // 不想参与css模块化的路径（类名不带hash，引入的映射对象是空的）
		},
		// 对预处理器的一些配置 less scss
		preprocessorOptions: { // key : config 的形式 
			// yarn add less 内部会有lessc编译工具 
			less: {  
				// 可以做一些配置参数   webpack可以在less-loader中配置
				math: 'always',
				globalVars: {
					contenColor: 'red', // 全局变量
				}
			}
		},
		devSourcemap: true,
		// 也可以在postcss.config.js中写配置
		// postcss: {
		// 	plugins: [postCssPresetEnv()]
		// }
	}
})