Vite中的CSS工程化方案

样式方案的意义

Q.不用任何CSS工程方案，会有哪些问题？

A.开发体验欠佳，原生不支持CSS选择器嵌套样式污染问题，容易互相覆盖和侮然浏览器兼容问题，需要手动添加浏览器前缀打包后的代码体积问题，所有的CSS代码都将打包到产物中，导致体积过大 

Q.CSS解决方案有哪些？

A.CSS预处理器：包含主流的Sass/Scss、Less和Stylus。这些方案各自写了一套语法，可以使用嵌套规则、定义变量、条件判断、循环语句，解决开发体验问题CSS Moduels：将CSS类名处理成哈希值，避免同名样式污染CSS后处理器PostCSS,用来解析和处理CSS代码，自动增加属性前缀等CSS in JS方案，可以再JS中写样式代码CSS原子化框架，通过类来指定样式，大大简化样式写法，提高效率 

CSS预处理器

Vite本身对CSS（Sass/Scss、Less和Stylus）各种处理器语言做了内置支持，我们直接安装使用，Vite底层会调 用CSS预处理器的官方库进行编译，比webpack减少了引入loader的配置过程。安装Sass的库，如下：

 pnpm i sass -D 

初始化完成后，使用一个全局主题变量

 // variable.scss $theme-color: red; 

 <template><h1 class="main">使用CSS预处理器</h1>