【Vite】对 CSS 处理

作者：System 时间：2024年08月21日分类：所有,css3 字数：583

在 Vite 中，CSS 文件会被导入 JavaScript 模块中，并在开发和生产环境中以不同的方式处理。

开发环境：在开发环境中，Vite 使用了一个虚拟的 <style> 标签，每个 CSS 文件都会被转换成 JavaScript，并通过 Hot Module Replacement (HMR) 功能实时更新样式。
生产环境：构建时，Vite 会将 CSS 提取到单独的文件中，并通过压缩和可能的 CSS 压缩优化来优化样式。

以下是一个简单的例子，展示如何在 Vite 项目中导入和使用 CSS 文件：




// 在 JavaScript 文件中导入 CSS
import './style.css';
 
// 你的 JavaScript 逻辑代码
console.log('Vite CSS processing example');

对应的 CSS 文件 (style.css):




/* style.css */
body {
  background-color: #f0f0f0;
  color: #333;
}

在 Vite 项目中，无需额外配置即可直接导入和使用 CSS 文件。Vite 会自动处理这些文件。