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

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

框架

我在用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 组件设计

我来解答赞 15 收藏

反馈

2 条解答

佼佼 Lv1

你这问题其实和WordPress关系不大，不过既然问到了Vite的CSS变量，我来给你指条明路。首先确认你的CSS文件确实被正确加载了，在DevTools里看看 :root 里的变量是不是真的存在。

如果没问题的话，那可能是样式覆盖的问题。建议你在 index.css 或者项目入口样式文件里再引入一次变量文件，确保优先级够高：

/* index.css */

@import './styles/variables.css';



body {

    background-color: var(--primary-color);

}

React组件里用的时候也要注意，确保父级元素没有覆盖这些变量。要是还不行，试试直接在 App.jsx 组件最外层加个 style 标签定义变量：

// App.jsx

function App() {

  return (

    <div>

      <style>

        :root {

          --primary-color: #3b82f6;

        }

      </style>

      <YourComponent />

    </div>

  );

}

这样基本能解决问题了。折腾CSS变量真是个体力活，搞不定就休息会儿再来。

2026-03-31 19:06

Good“春荣 Lv1

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

2026-03-24 16:00