Angel丶守护&雪之源 2023-12-11 14:03 采纳率: 22%
浏览 8
已结题

vue3 在App.vue文件如何用js修改另外一个css文件内的样式

在Vue3开发的项目中如何用App.vue文件的生命周期修改static/style/public.css文件内的样式或者css变量
App.vue文件如下

<script setup lang="ts">
import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";
// import { creatPublicScss } from "@/utils/creatPublic.js";
onLaunch(() => {
  // console.log("App Launch");
      // creatPublicScss()
});
onShow(() => {
  // console.log("App Show");
});
onHide(() => {
  // console.log("App Hide");
});
onLoad(()=>{
    
})

</script>
<style>
    /* 全局引入字体图标 */
    @import "@/static/style/iconfont.css";
    @import "@/static/style/public.css"
</style>

public.css文件如下:

:root{
        --theme-color: 变量
        更多变量...
}
uni-page-body> uni-view{
    background-color: var(--theme-color);
}

此处变量为后台提供的全局设置
更多变量均由App.vue创建

  • 写回答

1条回答 默认 最新

  • 远小帅 2023-12-15 12:06
    关注

    如果你想要动态样式,可以使用css变量

    :root {
        --main-bg-color: pink;
    }
    
    body {
        background-color: var(--main-bg-color);
    }
    

    js 修改:

    // 获取根元素 (通常是<html>)
    const root = document.documentElement;
    
    // 设置变量的新值
    root.style.setProperty('--main-bg-color', 'lightgreen');
    
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月6日
  • 修改了问题 12月11日
  • 创建了问题 12月11日

悬赏问题

  • ¥20 python爬虫遇到空文本取不出来
  • ¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
  • ¥15 curl 命令调用正常,程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥15 使用百度地图api 位置函数报错?
  • ¥15 metamask如何添加TRON自定义网络
  • ¥66 关于川崎机器人调速问题
  • ¥15 winFrom界面无法打开
  • ¥30 crossover21 ARM64版本安装软件问题
  • ¥15 mymetaobjecthandler没有进入