vue3设置全局css变量

1、common.scss文件中定义全局变量

css 复制代码
$common-color: red;

2、在vite.config.js中导入common.scss文件

TypeScript 复制代码
    defineConfig({
        css: {
            // css预处理器
            preprocessorOptions: {
                scss: {
                    charset: false,
                    additionalData: '@import "./src/styles/common.scss";',
                },
            },
        }
    })

3、页面中使用变量

css 复制代码
.test-color {
    color: $common-color;
}
相关推荐
自动花钱机11 分钟前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪26 分钟前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪31 分钟前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
snowfoootball1 小时前
基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案
前端·人工智能·后端·python·深度学习·高考
烛阴1 小时前
深入浅出:JavaScript ArrayBuffer 的使用与应用
前端·javascript
zhu12893035562 小时前
用Rust和WebAssembly打造轻量级前端加密工具
前端·rust·wasm
@PHARAOH2 小时前
WHAT - Electron 系列(一)
前端·javascript·electron
半句唐诗3 小时前
设计与实现高性能安全TOKEN系统
前端·网络·安全
小满zs3 小时前
React-router v7 第二章(路由模式)
前端·react.js
yanxy5123 小时前
【TS学习】(18)分发逆变推断
前端·学习·typescript