vite对css的默认支持
webpack中，我们需要在项目中安装css-loader才能让webpack识别css文件。
vue-cli基于webpack，内置了这个loader
Vite天生就是支持对CSS文件的直接处理的。
我们看一个例子：
我们在项目根目录里创建好index.html、main.js、index.css然后安装vite
index.html中我们引入main.js
<!DOCTYPE html>
<html lang="en"><head><title></title></head><body><script src="./main.js" type="module"></script><div>Vite天生就是支持对CSS文件的直接处理的。</div></body>
</html>
main.js中我们引入index.css
import "./index.css"
然后，index.css中我们加个全局背景
html,body {background: red;height: 100%;width: 100%;
}
使用vite启动项目，可以发现不用安装任何插件就可以识别.css文件。
vite中css样式的添加原理
当vite在读取到main.js中引用的index.css时，会使用node的fs模块获取其内容。
首先，将其原内容替换为js脚本(方便热更新或者css模块化)，同时设置Content-Type为js ，从而让浏览器以JS脚本的形式来执行该css后缀的文件。
然后，直接创建一个style标签, 将index.css中文件内的原内容直接复制进style标签里。最后，将style标签插入到index.html的head中。
CssModule
上述的样式文件引
最低0.47元/天 解锁文章
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
