Vite 中如何处理 CSS？

推荐答案

在 Vite 中处理 CSS 的方式非常灵活，支持多种 CSS 预处理器和模块化方案。以下是常见的处理方式：

1. 直接引入 CSS 文件：

   import './style.css';

2. 使用 CSS 预处理器（如 Sass、Less）：

   import './style.scss';

3. CSS 模块化：

   import styles from './style.module.css';

4. PostCSS 支持： Vite 内置了 PostCSS 支持，可以通过配置文件 postcss.config.js 进行自定义。

5. CSS 变量和动态样式： 可以通过 JavaScript 动态生成 CSS 变量或样式。

本题详细解读

1. 直接引入 CSS 文件

Vite 支持直接在 JavaScript 或 TypeScript 文件中引入 CSS 文件。Vite 会自动处理这些 CSS 文件，并将其注入到页面中。

import './style.css';

2. 使用 CSS 预处理器

Vite 支持多种 CSS 预处理器，如 Sass、Less 和 Stylus。只需安装相应的预处理器依赖，并在项目中直接使用。

例如，使用 Sass：

npm install -D sass

然后在代码中引入 .scss 文件：

import './style.scss';

3. CSS 模块化

Vite 支持 CSS 模块化，可以通过 .module.css 文件扩展名来实现。这种方式可以避免全局样式冲突。

import styles from './style.module.css';

function Component() {
  return <div className={styles.container}>Hello, Vite!</div>;
}

4. PostCSS 支持

Vite 内置了 PostCSS 支持，可以通过 postcss.config.js 文件进行配置。PostCSS 可以用于自动添加浏览器前缀、压缩 CSS 等。

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano'),
  ],
};

5. CSS 变量和动态样式

Vite 允许在 JavaScript 中动态生成 CSS 变量或样式。这种方式可以用于实现主题切换或动态样式调整。

const themeColor = 'blue';
document.documentElement.style.setProperty('--theme-color', themeColor);

通过这些方式，Vite 提供了强大的 CSS 处理能力，能够满足各种项目需求。