在这里定义变量 || 新建或定义一个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
