Vite处理CSS

处理简单css

当我们写出以下代码并通过vite启动：
index.html

1
2
<div class="name">秋华软创</div>
<script src="./main.js" type="module"></script>

main.js

1
import "./index.css"

index.css

1
2
3
4
.name{
    color: blue;
    font-size: large;
}

vite会做以下内容：
读取到main.js中引入了index.css
通过fs读取index.css中的内容
创建style标签包裹css文件中的内容
将style标签插入html的head中
将css中的文件替换为js脚本（方便热更新或css模块化），同时设置Content-Type为js（和读取vue文件同理），让浏览器以脚本方式执行css后缀的文件

CSS模块化

1、当有多个css文件定义了相同的类名就会造成类名冲突，可以通过以下方式处理冲突：
（1）将css文件命名为”xxx.module.css”
（2）main.js中写成以下形式

1
2
3
import index from "./index.module.css"
let div = document.querySelector(".name")
div.className=index.name

index为一个对象，该对象属性的属性名为原始类名，属性值为原始类名+哈希值
我们可以将对应元素的类名设置成对应属性就可以避免类名冲突
2、CSS模块化原理如下：
（1）module.css是一种约定，说明要开启模块化
（2）会将所有类名进行替换，变成类名+哈希值的样子
（3）同时创建一个映射对象如：{“xxx”:”xxx_as51we2“}
（4）将替换后的内容塞入style标签再插入html的head中
（5）将xxx.module.css变成js脚本
（6）将创建的映射对象在脚本中进行默认导出

Vite处理Less

首先下载Less，编写less文件如下：

1
2
3
4
5
6
7
//index.module.less
.out{
    .in{
        color: blue;
        font-size: large;
    }
}

修改main.js文件如下：

1
2
3
4
5
import index from "./index.module.less"
let outDiv = document.querySelector(".out");
let inDiv = document.querySelector(".out .in")
outDiv.className=index.out
inDiv.className=index.in

Vite关于CSS的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { defineConfig} from "vite";

export default defineConfig(({ command, mode }) => {
  return {
    envPrefix:"QIUHUA_",
    css:{//对css进行配置
      //modules配置最终会对给postcss modules进行处理
      modules:{
        localsConvention:"camelCaseOnly",//修改生成对象的key的展示形式为（驼峰或中划线）
        scopeBehaviour:"local",//local则开启模块化，global则为取消模块化
        generateScopedName:"[name]_[local]_[hash:5]",//配置生成类名的格式，还可以使用函数进行配置
        hashPrefix:"hello",//根据该值生成独特的hash值
        globalModulePaths:["./index.module.css"]//不想进行模块化的css文件
      },
      preprocessorOptions:{//key+config表示预处理器的名字
        less:{//整个配置对象最终会给到less的执行参数（全局参数）中去
          match:"always",//总是处理数学运算，不论它是否被包裹在括号中
          globalVars:{//less全局变量
            mainColor:"red"
          },
          devSourcemap:true//开启css的sourceMap（文件索引）
        }
      }
    }
  }
});