vue3/2+vite引入scss全局变量/设置主题颜色 /JS 动态修改CSS

在这里定义变量 || 新建或定义一个scss文件

image.png

1.上面的红框修改element内 全局样式/主题样式 应该还有不用!important的方法 有简单的 也有复杂的官方生成主题样式文件的 暂时没去研究 大神研究完了 麻烦@我一下 我也做个笔记

2.下面的红框是自定义样式 全局使用 一个地方修改 全局修改

image.png

vue3 vite 对应配置

使用这种方式不能是在main.js 或者 app.vue 的style标签内引入，如果引入的话自定义样式颜色那部分会报错

所以引入方式是重点

image.png

另外要注意的是 这个地方引入这个文件的话 如果再main.js也引入了 会报已经引入了错

所以如果main.js引入的话 记得去掉main.js里面的引入

vue2/3自定义的样式 这样使用：

image.png

image.png

vue-cli 在这里全局引入自定义样式 可以用来修改部分el或其他组件样式

image.png

---

关于JS动态修改样式

我这里是在header vue组件内进行修改的

image.png

最后附上可copy代码：

1.scss文件定义变量

//--test ：为js操作此变量需要用到的KEY
//red: 默认的css属性值
$textColor: var(--test, red);

2.js中更改$textColor 变量的值

//--test ：为js操作此变量需要用到的KEY
//blue: 修改后的css属性值
document.getElementsByTagName('body')[0].style.setProperty('--test', 'blue');

最后附上动态修改CSS样式四种方法：

都是获取DOM
通过DOM分别修改当前DOM样式属性值、
当前DOM整体css样式、
修改当前DOM的className类名、
将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。
参考1：https://blog.csdn.net/wx13227855087/article/details/81391787
参考2：https://blog.csdn.net/m0_59962820/article/details/125560291