vue动态更改主题颜色的一些想法_$color-primary

 vue3 + vite引入scss全局变量

这篇文章是对上篇文章中的第一位评论者的问题的一些解决办法

​​​​​​​​​​​​​​

需求

上篇文章说了如何在已经引入element_ui的情况下设置自己的全局scss变量（globalStyle.scss）,但是评论区有位开发者说有些时需要在js中动态改变scss的变量，比如整体修改网页的主题颜色。

但是在vite.config.js中全局引入scss后再在单个文件中引入的话，系统就会提示重复load的错误。针对这种情况有了这篇文章。

一、出错情境

vite.config.js和vue的js片段中同时引入globalstyle.css

//vite.config.js
 
 
  css: {
    preprocessorOptions: {
      scss: {
                                          //
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/332290
推荐阅读
articleAndroid  AAPT2 error: check logs for details_aapt:...
出事cause : 心血来潮升级自己的APPAndroidStudio 升级到3.2 buildToolsVersion...
                
                    赞
踩
articleAAPT: error: resource color类型错误_aapt: error: resou...
Android resource linking failedERROR:E:\software\Developer\A...
                
                    赞
踩
articleAndroid resource linking failed AAPT: error: resou...
提示ERROR:C:\Users\Administrator\.gradle\caches\transforms-2\f...
                
                    赞
踩
articleAndroid开发中报错总结之一_aapt: error: resource android:col...
报错总结之一_aapt: error: resource android:color/system_neutral1_1...
                
                    赞
踩
articleuni强制设置屏幕的横竖方向_landscape-primary...
https://uniapp.dcloud.io/collocation/pages?id=globalstyle在pa...
                
                    赞
踩
articlemysql学习笔记心得_id int(6)unsigned zerofill primary key...
mysql 安装：官网下载mysql安装包，解压后，在当前bin目录下打开cmd 执行mysqld --isntallm...
                
                    赞
踩
articleMySQL数据库 约束类型_constraint primary key...
Mysql数据库的约束类型有物种：主键约束（Primary Key）,唯一性约束（Unique）,非空约束（Not Nu...
                
                    赞
踩
articlecv2.error: OpenCV(4.9.0) D:\a\opencv-python\opencv...
ddddocr_cv2.error: opencv(4.9.0) d:\a\opencv-python\opencv-p...
                
                    赞
踩
articlevue 结合scss实现前台主题颜色动态变化_vue动态修改$--color-primary...
安装scss。定义想要变化的颜色和主题。定义方法动态切换颜色。使用、一键更改主题颜色。_vue动态修改$--color-...
                
                    赞
踩
相关标签
Android
android
android studio
c#
uni-app
mysql
数据库
database
面试
opencv
python
javascript
前端
scss
vue.js