CSS 如何在 Vite 中将 CSS 提取为单独的 .css 文件

在本文中，我们将介绍如何使用 Vite 将 CSS 代码提取为单独的 .css 文件。Vite 是一款现代化的前端构建工具，它在开发过程中具有快速的冷启动和热模块替换的能力，以及具有高度优化的构建输出。

阅读更多：CSS 教程

什么是 Vite？

Vite 是一个基于现代浏览器原生 ES 模块的开发构建工具，它主要用于前端项目的开发和构建过程。它采用了现代化的构建方式，通过 ES 模块原生支持，可以实现一次性加载所需的模块，从而提供了更快的开发和构建速度。

指定提取 CSS 的方式

在 Vite 中，我们可以通过配置文件 vite.config.js 来指定提取 CSS 的方式。vite.config.js 是一个配置文件，在项目根目录下创建，并通过下列示例代码来实现 CSS 提取：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssCodeSplit: true,
  },
});

上述配置中的 cssCodeSplit 设置为 true，表示将 CSS 代码拆分为独立的 .css 文件。通过这个配置，Vite 在构建时会将 CSS 提取为单独的文件，而不是内联在 HTML 中。

示例：提取 CSS 代码

让我们来看一个示例，说明如何在 Vite 中提取 CSS 代码。

首先，在项目根目录下创建一个 vite.config.js 配置文件，并在其中添加上述提取 CSS 的配置。

接下来，在项目的 src 目录下创建一个名为 styles 的文件夹，并在其中创建一个名为 main.css 的 CSS 文件。例如，我们创建如下文件：

/* src/styles/main.css */
body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  font-size: 24px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

然后，在项目的入口文件 main.js 中引入 CSS 文件：

// src/main.js
import './styles/main.css';

// rest of your code

接下来，在项目的根目录下运行以下命令启动项目：

npm run dev

现在，当你在浏览器中打开项目时，Vite 会将 CSS 代码提取为单独的 .css 文件，并以 link 标签引入到 HTML 中。你可以在浏览器的开发者工具中查看到这个 link 标签。

通过上述示例，你可以看到如何使用 Vite 将 CSS 代码提取为单独的 .css 文件，并将其链接到 HTML 中。

总结

在本文中，我们介绍了如何在 Vite 中将 CSS 提取为单独的 .css 文件。通过配置文件中的 cssCodeSplit 选项，我们可以指定 Vite 在构建时将 CSS 代码拆分为独立的文件。这对于优化项目的加载速度和组织项目的样式代码非常有帮助。希望本文对你理解并使用 Vite 提取 CSS 代码有所帮助。