在Vite项目中接入CSS工程化方案

在上一篇文章使用Vite快速构建前端React项目使用 Vite 初始化了一个 Web 项目，然而能够使用 Vite 官方的脚手架来构建项目是远远不够的，我们还需要考虑诸多的工程化因素，以及和其他第三方插件的融合。接下来，我们将以实战的方式逐个击破Web工程化的各个方面。

首先，前端工程化一个离不开的话题便是CSS样式方案。在早期的前端开发中，大家或许都手写过最原生的CSS样式，但是原生 CSS 存在着诸多问题，并且开发效率极低。因此，在现在的前端工程化开发中出现了各种CSS样式方案。

一、原生CSS方案的痛点

对于初学者来说，在开发前端的样式时首先想到的便是直接写原生CSS样式。但时间一长，难免会发现原生 CSS 开发的各种问题，常见的问题如开发体验欠佳、样式污染问题、浏览器兼容问题等。

• 开发体验欠佳。比如原生 CSS 不支持选择器的嵌套：

.container .header .nav .title .text {
  color: blue;
}
.container .header .nav .box {
  color: blue;
  border: 1px solid grey;
}

• 样式污染问题。如果出现同样的类名，很容易造成不同的样式互相覆盖：

// a.css
.container {
  color: red;
}


// b.css
.container {
  color: blue;
}

• 浏览器兼容问题<