vue+less 实现全局变量和换肤功能

最新推荐文章于 2023-08-14 16:16:17 发布
最新推荐文章于 2023-08-14 16:16:17 发布
阅读量1.8k 收藏 8
点赞数 2
文章标签： vue.js less javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IG_The__Shy/article/details/122559419
版权
本文介绍了如何在Vue项目中使用Less实现全局变量，并通过创建`global.less`文件存储变量。接着，创建`vue.config.js`配置文件引入全局变量。为了实现换肤功能，创建`theme.css`，在`main.js`引入`global.less`，并利用事件触发改变顶级标签的类名来切换皮肤。文章鼓励读者在前端开发中互相学习和进步。
摘要由CSDN通过智能技术生成

首先安装less依赖
这里为了一些不必要的麻烦 直接安装指定版本 要不然使用时候会出问题

npm install less@3.0.4 
npm install less-loader@5.0.0

安装以后新建一个less文件 用于存放全局变量取名global.less
在这里插入图片描述
less里面可以命名一些变量

@back: red;

然后如果没有vue.config.js文件的话 就在根目录创建一个vue.config.js文件
在这里插入图片描述
vue.config.js里面引入创建的那个全局变量

const path = require("path")
最低0.47元/天 解锁文章
躲起来吃火锅
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue+iview+less 实现换肤功能
10-18
主要介绍了vue+iview+less 实现换肤功能,项目搭建用的vue—cli，css框架选择的iview，具体操作流程大家跟随脚本之家小编一起看看吧
使用vue + less 实现简单换肤功能的示例
08-28
下面小编就为大家分享一篇使用vue + less 实现简单换肤功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于less实现换肤
weixin_41979428的博客
12-09 1429
themes -skins --dark.less --white.less 对应皮肤的less变量   -with-skins.less 定义less函数 .with-skins(@rules){ :global(.skin-dark){@import (multiple) "./skins/dark.less";@rules();} :global(.skin-white){@...
less全局变量修改
A_ta_and_run的博客
06-06 883
项目用到了antv的a-cascader组件，需求是既要实现下拉懒加载功能和手动输入搜索地址，由于手动输入查询出来的下拉框pop宽度不是100%，故而会在右边显示出多余的空白空间，测试又让我把这个修一下。。没有办法，查看了属性 ant-cascader-menu 没有设置width，然后给设置了宽度，发现存在一些问题。比如 懒加载下拉框和手动输入框会存在差异。于是想到了动态修改这个ant-cascader-menu的值。由于项目里用到了less,
使用vue + less 实现简单换肤功能
JessicaLi的博客
05-29 951
做的换肤效果比较简单，只是顶部导航背景色的改变。下面是效果图。 首先，先说一下我最初的思路。 我最初的想法是使用less定义变量，然后通过js来切换变量，通过切换的变量来达到换肤的效果。 我先新建了一个 theme.less文件，代码如下： @theme:@themea; @themea:pink; @themeb:blue; @themec:gray; 如我最开始的想法，应该是通过点击事件来改变变量 @theme 的值。 我用了element-u...
less 全局变量使用
weixin_30404405的博客
11-18 1054
less 全局变量使用 忽然想定义一个变量，但是却需要每个 .vue 文件都需要单独引入这个全局变量才可以，导致很多重复不必要的工作，因而得寻找一种可以任何地方都可以访问的方法 借助换肤这个功能 sass-resources-loader /** vue-cli3.0 ** // vue.config.js module.exports = { chainWebpack: config...
Vue + Scss 动态切换主题颜色实现换肤的示例代码
10-15
主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element+Java实现批量删除功能
10-17
主要介绍了vue+element+Java实现批量删除功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
springboot + xterm.js + vue + websocket实现终端功能
12-08
1、前端框架：Vue + element-ui 2、后端框架：SpringBoot + Mybatis 3、数据库：H2 4、其他第三方工具或者插件： Jsch：用于远程连接ECS服务器。 Websocket：与前端进行实时交互。 xterm：渲染web版本的terminal终端...
基于vue+element实现全局loading过程详解
11-19
在本文中，我们将深入探讨如何基于Vue.js和Element UI库实现...通过以上步骤，我们就实现了基于Vue+Element的全局loading功能。在页面跳转和API请求时，系统会自动管理loading的显示和隐藏，从而提供流畅的用户体验。
Vue2.0设置全局样式(less/sass和css)
08-28
主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在vue 中使用 less的教程详解
10-17
主要介绍了在vue 中使用 less 的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue2 全局变量的设置方法
08-27
Vue2 中设置全局变量有两种方法：全局变量专用模块和全局变量模块挂载到 Vue.prototype 里。 1. 全局变量专用模块 全局变量专用模块是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。例如，...
在vue里面设置全局变量或数据的方法
11-28
本文将详细讲解如何在Vue中实现全局变量的设置，并提供一个实际示例。 首先，我们需要理解Vue中的插件系统。Vue插件是一种扩展Vue功能的方式，它可以通过`Vue.use()`方法安装。我们可以创建一个自定义的插件，用来...
vue 配置less全局变量
qq_42493241的博客
08-31 3459
总结下配置less全局变量踩过的坑 1、使用npm安装less npm run less --save 2、安装less-loader 注意使用高版本run serve会有问题 这里使用的7.x版本 npm run less-loader@7.x --save-dev 3、安装vue-cli-plugin-style-resources-loader npm run vue-cli-plugin-style-resources-loader --save-dev 4、在vue.confi
vuejs配置less
weixin_30632883的博客
03-13 208
　　本次我们来聊聊，vuejs里如何使用less。都是根据自己的开发经验来写，不对的地方请各位拍砖。 在webstorm上配置Less 　　首先，全局安装less 　　npm install less -g 　　然后，在webstorm上配置less插件，"File" --> "settings"-->"Tools" 　　 　　在"file Watch...
vue + less 实现动态主题换肤功能
最新发布
weixin_44784401的博客
08-14 2900
vue + less 实现动态主题换肤功能
【vue && less】vue使用全局less
代码随想录
11-22 455
我一直以为vue可以是用全局的less，直到自己接触了才知道要通过配置去实现。我可查到的配置还挺坑的。这里就记录一种。 该方式我只在vue-cli4及以上使用过 1.安装相关包 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 2.在vue.config.js中添加以下代码 module.exports = { pluginOptions: {//全局使用less 'style-.
vue2+uniapp开发实现一键调整全局字体大小
04-18
很高兴能为您解答问题！关于vue2 uniapp开发实现一键调整全局字体大小，您可以通过设置全局样式的方式来实现： 1. 在App.vue中引入一个全局样式变量，命名为font-size，如下所示： <style> :root{ --font-size: 16px; } </style> 2. 在需要改变字体大小的元素上使用该变量，如下所示： <text style="font-size:var(--font-size)">这里是文本</text> 3. 在需要调整字体大小的地方，通过改变全局样式变量的值来实现，如下所示： //app.js Vue.prototype.$fontSize = function (num) { document.documentElement.style.setProperty('--font-size', num + 'px'); } //某个组件： this.$fontSize(20); 当执行this.$fontSize(20)时，全局样式中的font-size就会变成20px，从而实现了一键调整全局字体大小的功能。 希望能够帮到您！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值