Vite里怎么正确引入全局CSS变量？

瑞芳🍀 提问于 2026-03-24 15:48:25 阅读 12

框架

我在用Vite+React开发项目，想在:root里定义一些CSS变量，然后在组件里用，但发现根本读不到。

我把变量写在src/styles/variables.css里了，也在main.jsx里import了这个文件，但组件里用var(--my-color)就是不生效，控制台也没报错，一脸懵。

是不是Vite对CSS变量的处理和Webpack不一样？我试过把变量直接写在index.html的style标签里，倒是能用，但这肯定不是正解啊……

/* src/styles/variables.css */
:root {
  --primary-color: #3b82f6;
  --border-radius: 8px;
}

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './styles/variables.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Vite 组件设计

我来解答赞 7 收藏

反馈

1 条解答

Good“春荣 Lv1

你这个问题，检查一下variables.css是否被正确加载了，有时候路径搞错了就没了。确保路径没问题后，重启一下vite服务，有时候热更新会有坑。如果还不好使，试试在App.css或者某个全局样式文件里再import一次variables.css。

2026-03-24 16:00