五分钟学会使用Sass定制项目主题（换肤）新手向

最新推荐文章于 2025-05-08 10:52:14 发布
最新推荐文章于 2025-05-08 10:52:14 发布
阅读量3.7k 收藏 8
点赞数 3
文章标签： vue 前端 sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52254428/article/details/120481315
版权
本文详细介绍了如何在Vue项目中使用Sass实现主题定制，包括创建sass样式文件夹，配置dark和light主题，编写handle.scss和common.scss文件，以及在App.vue中引入和切换主题的方法。通过示例展示了背景颜色的切换，提供了一种简单易懂的换肤功能实现方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

vue项目使用sass定制主题或称作换肤功能，先上效果图

1 引入sass 

2 创建sass样式文件夹，

3 主题配置步骤详解

themes文件夹

darl_var.scss

light_var.scss

dark.scss中引入dark_var.scss 使用我定义好的值

以及light.scss

common文件夹

themes.scss

handle.scss

common.scss

themefy.scss文件

然后在sass样式总文件themefy.scss下引入handle.scss

4 在App.vue中引入themefy.scss

切换主题

5 总体思路

vue项目使用sass定制主题或称作换肤功能，先上效果图

示例中实现了背景的主题切换，根据需要，整体全部组件的切换后面会讲到

直接上干货,

1 引入sass 

npm install node-sass --save-dev 

npm install sass-loader --save-dev

 注意，若使用

经常会报错，解决方案有两种 1 npm引入时 设置好下载包的版本号 

                                                2 在package.json中，找到两个依赖，改变版本号，删除node_modules文件夹，重新npm install 这样相当于重新下载全部的依赖，

我使用的版本是（package.json下）

"node-sass": "^4.14.1",

"sass-loader": "^7.3.1",

2 创建sass样式文件夹，

我这里是在src下新建了public/scss

 并且在scss下新建了两个文件夹和一个sass总文件themefy.scss，

 

3 主题配置步骤详解

themes文件夹

先讲解thems文件夹，我这里两个主题命名为light（浅色）和dark（深色）

dark_var.scss和light_var.scss是两大主题的配置值，可以理解成自己给样式配置具体的值,我这里只均定义了一个值

darl_var.scss

$dark-bg-color:rgb(21, 21, 133)

light_var.scss

$light-bg-color:#e1e1e7;

然后我们将配置值分别使用到到各主题中去

最低0.47元/天 解锁文章
Saint枯狗
关注
基于vue+sass实现主体换肤功能
cczhuteng的博客
06-01 1133
最近有个需求：系统有深色和浅色两种主体，点击切换主体按钮实现换肤功能，我使用的是vue框架，本来感觉页面也不是很复杂，想用个变量判断来控制，后来想想还挺麻烦的，写一大坨代码也不太好看，于是用sass来实现。 首先，建了个common.scss文件，定义两个Maps，*（Maps可视为键值对的集合，键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围，键值对被都好分割 。 Maps中的keys和values可以是sassscript的任何对象）*用来存储深色和浅色所用到的色值，
Vue中使用sass实现换肤功能
12-12
先给大家展示下效果图：   先给大家看一下目录和主要文件： 解释一下主要文件： base.scss： 一些通用样式文件。 mixin.scss： 定义mixin方法的文件。 varibale.scss： 颜色，字体，背景的配置文件 以下就拿封装的head组件代码来展示以下实现逻辑，现在大家主要是来理解，不要着急复制代码，在文章最后会贴出三个主要文件的代码的。 为什么会在 background:$background-color-theme; 地方标注错误？ 如果之前用过sass的同学可能会知道，这样虽然实现了css样式变量化，但是后期没有办法作出灵活更改的。 所以需要把设置背景颜色封装成
sass换肤
u014708123的博客
12-22 460
themes: (light: (//字体//背景//边框),dark: (//字体//背景//边框。
Sass颜色主题与数据类型深度解析
最新发布
weixin_35906794的博客
05-08 322
本文探讨了如何在Sass中管理颜色主题并创建动态变化的界面元素。通过定义不变与可变的颜色变量，以及利用Sass的颜色函数来简化主题创建过程。此外，本文还对Sass中支持的数据类型进行了深入分析，包括颜色、数字、字符串、布尔值、列表和映射，并讨论了如何利用这些数据类型进行更智能的样式编写。
Vue+Sass实现动态换肤
u598975767的专栏
01-03 5074
言明，本文实现的动态换肤并非elementUi官网那种随意用ColorPicker实时更改主题的效果，而是为系统预设的几种主题事先配置颜色，然后线上触发更改主题的事件。 首先感谢luanxiyuan老师的博文引导。 此方案涉及Sass的map遍历、函数定义、map存取、混合器等相关知识，具体API详参官网https://www.sass.hk/docs/。 大概的思路就是给html根标签设置...
在vue里面，使用sass实现换肤
qq_56336417的博客
12-06 347
themes: (skin1:( //主题1),skin2:( //主题2),default;@mixin currentTheme($themes){ //获取当前主题的全部属性global;global;//获取当前主题的全部属性@content;//相当于vue的插槽,把代码放@content这里运行@function getKeyValue($key){ //获取主题内,某个属性的值。
在vue项目中使用sass语法问题
10-16
在Vue项目中使用Sass语法是前端开发中的一个重要话题，尤其对于希望提高CSS组织性和复用性的开发者来说。Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它扩展了CSS的功能，支持变量、嵌套规则、...
在vue-cli创建的项目中使用sass操作
10-14
首先，为了在Vue CLI项目中使用Sass，我们需要安装两个关键的依赖包：`sass-loader` 和 `node-sass`。`sass-loader` 是一个Webpack加载器，用于将Sass源代码编译成CSS，而`node-sass`是Sass的Node.js绑定，提供Sass...
在vue项目中使用sass的配置方法
08-27
在 Vue 项目中使用 Sass 的配置方法 在 Vue 项目中使用 Sass 需要进行一些配置，以下是详细的配置步骤。 第一步：创建新项目 首先，我们需要创建一个基于 Webpack 模板的新项目。我们可以使用 Vue CLI 来创建项目...
一个控件几行代码实现换肤（可支持菜单）
叶帆工作室
04-12 8673
 这是从vbAccelerator(http://vbaccelerator.com)的皮肤程序修改而来，把DLL方式修改为OCX，并且修改为仅通过几行指令，即可完成皮肤加载。此外，不再需要SSubTmr6.dll的支持了，修改了原程序XML方式导入导出的Bug，加入了"Borders"字段，增加了异型窗体处理，新编写了皮肤制作程序。   ‘皮肤示例代码  Private Sub Form
VUE基于sass换肤
Ariel_tilamisu的博客
11-24 794
VUE基于sass换肤
【sass+css变量实现换肤】
CaraYQ的博客
01-20 1323
这样，我们就利用scss完成了换肤：首先借助scss的方法，修改变量的定义的形式，通过方法生成样式的属性，根据html上的属性名来决定用哪一套变量，从而生成不同的颜色。接下来配合css变量。定义sass或者css变量，所有的颜色都用变量定义，当用户自定义颜色时，通过覆盖或者修改变量完成换肤。在src/App.vue中添加按钮，点击后进行皮肤切换。假如你最近在开发一套组件库，如何让用户可以换肤呢？
vue使用sass实现主题换肤功能
故里的博客
09-22 1376
本文只介绍深浅两种主题换肤作为参考。 1.创建配置动态样式的scss文件，路径为/src/assets/scss/_theme.scss。 $themes: ( light: ( //字体 font_color1: #000, //背景 background_color1: #fff, // 背景渐变 background_gradient1:#F8FBFD , //边框 .
Vue项目中使用Sass实现动态换肤，软件开发项目经理面试题
m0_61042126的博客
04-02 834
/定义全局主题&颜色的map数组，鉴于V5只有白天和晚上的主题，此处仅定义这两种//切记 所有颜色一式两份儿，务必保证key值统一，key值可以自定义，注意避免$%_之类的，//与sass自有符号冲突，见文知意即可//data-theme为dark时，样式引用dark$themes: (// lightlight:),dark:这里定义了一个map–$themes，分别存放对应主题的颜色变量集合。
sass实现皮肤动态切换
zhengjie0722的博客
12-01 1391
在很多业务场景中，对同一功能应用系统的复用，需要改变UI设计，或者是直接动态皮肤切换。sass的map遍历、函数定义、map存取、混合器等知识为皮肤的切换提供了相应的技术支持。 实现的思路就是给html的根标签设置一个“data-theme”属性，通过js控制“data-theme”的属性值，sass根据“data-theme”的属性值来判断使用相应的主题遍历。 比如，我们要实现一个系统平台内红色主题“red”和蓝色主题“blue”的切换，具体实现方式如下： 1.实现皮肤切换，对应几...
一文读懂vue+scss实现主题换肤功能
pixle的博客
01-26 4659
web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）方案，这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量，这个变量可以是HTML标签属性值也可以是类名，这个变量位置既可以是最顶层也可以是需要换肤地方（子节点）。变量如果是类名的话需要设置一个独一无二的名称，这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发，所以更好的选择变量是属性值。//顶层方案。
在 Vue CLI 项目中使用 Sass 修改 Element UI 主题色
qq_39383503的博客
03-24 478
本文将详细介绍如何在 Vue CLI 项目中使用 Sass 修改 Element UI 的主题色。文章将分为几个部分，包括安装依赖、创建自定义主题文件、引入自定义主题文件以及解决可能遇到的问题。
如何利用 SCSS 实现一键换肤
HelloWorldLJY的博客
02-15 2184
环境准备 首先我们需要安装 scss 解析环境 npm i sass // 注意 sass-loader 安装需要指定版本 如果安装最新版本会报错 this.getOptions 这个方法未定义 npm i -D sass-loader@10.1.0 // 利用 normalize.css 初始化页面样式 npm i -S normalize.css 小技巧 这里讲一个小技巧，定义的时候可以先定义一个基准变量 base-param 然后其他状态的值可以依赖这个 base-param 进行缩放或放大实现
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值