使用Vite处理css less及postcss示例详解

目录

• 1. css
• 2. less
• 3. postcss
• 4. 小结

1. css

当前，我们的 vite的基本使用 项目中是没有 css 代码的，但在真实的项目中，肯定会有 css 代码，那 Vite 能否帮助我们对 css 做支持呢？我们可以测试一下，在 src 目录下新建 css 文件夹，在 css 文件夹中新建 style.css 文件，内容如下：

body {
  background-color: #f66;
}

有了这个 css 文件后，先来思考一下，这个 css 文件现在有被打包吗？很明显，没有。因为它没有在项目的依赖中，所以不会被打包。那么项目的依赖在哪里呢？项目依赖的入口在入口文件 index.html 中：

那么我们可以在 src/main.js 文件中导入这个 style.css 文件，将其加入项目的依赖文件中：

保存更改后，你会发现终端中会打印一行信息，提示我们页面已经重新加载了。这时再来看浏览器页面：

可以看到，页面背景颜色已经成功变成了我们设置的颜色。可见，css 代码已经生效了，所以，Vite 默认就支持对 css 代码的处理（而不需要再像使用 Webpack 时，还需要使用 css-loader 和 style-loader）。它也是通过在 元素中插入包含了有关样式代码的