Vite笔记之08-vite对css处理以及css模块化介绍

1. vite对css处理的过程

创建目录

├─index.css 
├─index.html 
├─main.js 
├─package.json 
├─vite.config.js

index.css

html,
body {
  width: 100%;
  height: 100%;
  background-color: purple;
}

main.js

import "./index.css";

vite自带对css文件的直接处理，处理方式和App.vue相同，都是当作js处理

1. vite 读取main.js中引用到了index.css
2. 直接fs模块去读取index.css中的文件内容
3. 直接创建一个style标签，将内容copy进入style标签
4. 将style标签插入index.html的head中
5. 将改css文件中的内容替换成js脚本，同时设置content-type为js，从而以js进行解析。 用处 方便热更新，css模块化防止样式覆盖

2. css重名覆盖问题

场景：

css命名规范可能相同，

• 外部组件包裹类名 wrapper
• 底部组件使用footer

多人开发可能同时使用同一个类名

比如：

├─componentA.js
├─componentA.css
├─componentB.js
├─componentB.css
├─main.js

componentA.js

import "./componentA.css";

const div = document.createElement("div");
document.body.appendChild(div);
div.className = "footer";

componentA.css

.footer {
  width: 200px;
  height: 200px;
  background-color: beige;
}

componentB.js

import "./componentB.css";

const div = document.createElement("div");
document.body.appendChild(div);
div.className = "footer";

componentB.css

.footer {
  width: 100px;
  height: 200px;
  background-color: pink;
}

main.js

import "./componentA";
import "./componentB";

前面的被后面覆盖，因为类名重复。协同开发出现的问题。

3.css module

css module解决重名覆盖问题。 componentA.js

import componentACss from "./componentA.module.css";

console.log("打印***componentACss", componentACss);

const div = document.createElement("div");
document.body.appendChild(div);
// div.className = "footer";
div.className = componentACss.footer;

componentA.module.css

.footer {
  width: 200px;
  height: 200px;
  background-color: beige;
}

componentB.js

import componentBCss from "./componentB.module.css";

console.log("打印***componentBCss", componentBCss);

const div = document.createElement("div");
document.body.appendChild(div);
// div.className = "footer";
div.className = componentBCss.footer;

componentB.module.css

.footer {
  width: 100px;
  height: 200px;
  background-color: pink;
}

main.js

import "./componentA";
import "./componentB";

通过xxx.module.css 进入导入类名变成带hash字符串的名称。

没有加module的会直接读取内容

大概的原理：基于node

1. module.css (module是约定，表示需要开始css模块化)
2. 将你用到的类名进行一定规则的替换，（将footer替换成_footer_14unz_1）
3. 同时创建一个映射对象，（{footer: '_footer_14unz_1'}） 保存下来
4. 将替换后的内容放进style标签,然后放入head标签中，能够读到index.html文件内容
5. 将componentA.module.css内容进行全部移除，替换成JS脚本
6. 将创建的映射对象，在脚本中进行默认导出

4. less预处理器

提供了一些额外的语法，常用的支持嵌套功能，能定义变量,需要安装less ，yarn add less

index.module.less

.content {
  .main {
    background-color: green;
  }
}

componentA.js

import componentALess from "./index.module.less";

console.log("打印***componentALess", componentALess);