CSS/预处理器集成配置

项目配置与基础使用 CSS/预处理器集成配置

Vite 提供了开箱即用的 CSS 支持，同时也支持流行的 CSS 预处理器如 Sass、Less 和 Stylus。通过简单的配置即可实现这些预处理器的集成，让开发者能够更高效地编写样式代码。

CSS 基础配置

在 Vite 项目中，可以直接导入 .css 文件，这些样式将自动注入到页面中。Vite 会自动处理 CSS 文件的 HMR（热模块替换），使得样式修改能够即时生效而不需要刷新页面。

// 在 main.js 或组件中导入 CSS 文件
import './styles/main.css'

对于 CSS 模块化，Vite 支持通过 .module.css 后缀名约定：

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

function Component() {
  return <div className={styles.container}>内容</div>
}

预处理器集成

Sass/SCSS 配置

要使用 Sass，首先需要安装相应的依赖：

npm install -D sass

安装后，Vite 会自动识别 .scss 和 .sass 文件：

// variables.scss
$primary-color: #42b983;

// 在组件中使用
<style lang="scss">
@import './styles/variables';

.container {
  color: $primary-color;
}
</style>

Less 配置

安装 Less 支持：

npm install -D less

使用示例：

// styles.less
@primary-color: #42b983;

.container {
  background-color: @primary-color;
}

Stylus 配置

安装 Stylus 支持：

npm install -D stylus

使用示例：

// styles.styl
primary-color = #42b983

.container
  border 1px solid primary-color

全局样式与变量注入

对于需要在多个组件中共享的变量和混入，可以通过 Vite 配置实现自动注入：

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

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`
      },
      less: {
        additionalData: `@import "./src/styles/variables.less";`
      }
    }
  }
})

PostCSS 配置

Vite 内置了 PostCSS 支持，只需在项目根目录下创建 postcss.config.js 文件：

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true
      }
    })
  ]
}

CSS 拆分与优化

在生产构建时，Vite 会自动将 CSS 提取到单独的文件中。可以通过配置修改默认行为：

// vite.config.js
export default defineConfig({
  build: {
    cssCodeSplit: false, // 禁用 CSS 代码拆分
    cssTarget: 'chrome61' // 指定目标浏览器
  }
})

自定义 CSS 模块类名

可以通过配置自定义 CSS 模块生成的类名格式：

// vite.config.js
export default defineConfig({
  css: {
    modules: {
      localsConvention: 'camelCaseOnly',
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }
})

现代 CSS 功能支持

Vite 支持现代 CSS 特性，如 CSS 变量、CSS Nesting（需 PostCSS 插件支持）等：

:root {
  --main-color: #42b983;
}

.container {
  color: var(--main-color);
  
  & > .item {
    padding: 1rem;
  }
}

与框架的深度集成

Vue 中的样式处理

在 Vue 单文件组件中，可以方便地使用各种预处理器：

<template>
  <div class="container">内容</div>
</template>

<style lang="scss" scoped>
.container {
  color: $primary-color;
}
</style>

React 中的 CSS-in-JS 方案

虽然 Vite 主要处理传统 CSS 文件，但也可以与 CSS-in-JS 库配合使用：

// 安装 styled-components
npm install styled-components @types/styled-components

// 使用示例
import styled from 'styled-components'

const Button = styled.button`
  background: ${props => props.primary ? '#42b983' : 'white'};
  color: ${props => props.primary ? 'white' : '#42b983'};
`

性能优化技巧

1. 按需导入 CSS：只在需要的组件中导入 CSS 文件
2. 使用纯 CSS 变量：避免预处理器变量在运行时无法修改的限制
3. 利用构建时优化：Vite 会自动处理 CSS 压缩和自动前缀添加

// 按需导入示例
import styles from './Component.module.css'

function Component() {
  return <div className={styles.container}>内容</div>
}

常见问题解决

1. 预处理器不工作：检查是否安装了对应的预处理器包（sass/less/stylus）
2. 全局变量未注入：确认 additionalData 配置路径正确
3. CSS 模块类名冲突：调整 generateScopedName 配置增加哈希长度

// 调试 CSS 配置
console.log(import.meta.env.VITE_CSS_CONFIG)

进阶配置选项

Vite 提供了细粒度的 CSS 配置选项，可以满足各种复杂需求：

// vite.config.js
export default defineConfig({
  css: {
    devSourcemap: true, // 开发环境 sourcemap
    transformer: 'postcss', // 指定 CSS 转换器
    preprocessorMaxWorkers: 4 // 预处理器最大工作线程数
  }
})

与 Tailwind CSS 集成

Vite 可以轻松集成 Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

配置 tailwind.config.js:

module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 CSS 文件中引入 Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;