样式处理

// 在 JS/TS 中直接导入
import './style.css'          // 全局注入
import styles from './App.module.css'  // CSS Modules

// 支持 CSS @import
// style.css
@import './reset.css';
@import './variables.css';

// page.js — 动态导入
import('./page.css') // 这段 CSS 只会随 page.js 一起加载

/* Button.module.css */
.primary {
  background-color: #1890ff;
  color: white;
}
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

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

function Button({ disabled }) {
  return (
    <button className={`${styles.primary} ${disabled ? styles.disabled : ''}`}>
      Click me
    </button>
  )
}

// vite.config.js
export default defineConfig({
  css: {
    modules: {
      // 类名生成规则
      localsConvention: 'camelCaseOnly', // 或 'camelCase' / 'dashes' / 'dashesOnly'
      // 作用域规则
      scopeBehaviour: 'local',           // 或 'global'
      // 生成的作用域名称
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      // 启用全局异常
      globalModulePaths: [/global-styles/],
      // 导出的全局名称
      exportGlobals: false,
    },
  },
})

/* 在 CSS Module 中使用全局和本地选择器 */
.text {
  color: red;
}

:global(.global-class) {
  color: blue;
}

:local(.local-class) {
  color: green;
}

/* 组合 */
.text :global(.ant-btn) {
  margin: 0;
}

npm i -D postcss autoprefixer

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
    // ... 其他插件
  },
}

export default defineConfig({
  css: {
    postcss: {
      plugins: {
        autoprefixer: {},
      },
    },
  },
})

# Sass / SCSS
npm i -D sass

# Less
npm i -D less

# Stylus
npm i -D stylus

// 直接在代码中导入
import './style.scss'
import './style.less'
import './style.styl'

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 注入全局变量/mixin 到每个 scss 文件
        additionalData: `@use "@/styles/variables" as *;`,
        // Sass 配置
        api: 'modern-compiler',  // 或 'modern' / 'legacy'
        silenceDeprecations: ['legacy-js-api'],
      },
      less: {
        // 注入全局变量
        additionalData: `@import "@/styles/variables.less";`,
        // 修改变量
        modifyVars: {
          'primary-color': '#1890ff',
        },
        javascriptEnabled: true,
      },
      stylus: {
        // Stylus 选项
      },
    },
  },
})

export default defineConfig({
  css: {
    // 配置 CSS Modules 行为
    modules: { /* ... */ },

    // PostCSS 配置
    postcss: { /* ... */ },

    // 预处理器选项
    preprocessorOptions: { /* ... */ },

    // 开发时：是否将 CSS 内联到 JS 中（默认 false）
    // 设为 true 可减少开发时的文件数量
    devSourcemap: false,

    // CSS 的 sourcemap 精细化程度
    // 生产构建时默认关闭
    devSourcemap: false,
  },
})

/* 原始 */
@import './reset.css';
@import '@/styles/variables.css';

/* Vite 处理：
  - 路径别名（@）被解析
  - node_modules 中的 CSS 也被正确内联
  - 支持 CSS Modules 方式的导入
*/

export default defineConfig({
  build: {
    // assetsInlineLimit: 小于此值的资源会被内联为 base64
    assetsInlineLimit: 4096,  // 4KB，默认值
    // 设为 0 禁用内联
  },
})

npm i -D tailwindcss @tailwindcss/vite

// vite.config.js
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

/* src/index.css */
@import "tailwindcss";

npm i -D unocss

// vite.config.js
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [UnoCSS()],
})