less使用手记 主题切换 全局import less
切换 全局 主题 import Less
2023-09-11 14:16:35 时间
实现主题颜色切换
components/theme.less,跟据@theme读取主题布局
@theme: dark; .dark-theme (@transparency) when (@theme = default) { color: rgba(0, 0, 0, @transparency); } .dark-theme (@transparency) when (@theme = dark) { color: rgba(255, 255, 255, @transparency); } .dark-theme-color (@transparency) when (@theme = default) { color: rgba(0, 0, 0, @transparency); } .dark-theme-color (@transparency) when (@theme = dark) { color: rgba(255, 255, 255, @transparency); }
引用theme.less
<style lang="less" scoped> @import '~@comp/theme.less'; .title { .dark-theme-color(0.85); font-size: 16px; font-weight: 500; margin-bottom: 16px; } </style>
需先在vue.config.js做配置
chainWebpack: (config) => { config.resolve.alias .set('@$', resolve('src')) .set('@api', resolve('src/api')) .set('@assets', resolve('src/assets')) .set('@comp', resolve('src/components')) .set('@views', resolve('src/views')) .set('@layout', resolve('src/layout')) .set('@static', resolve('src/static'))
这样就可以实现主题化
------------------------------分割线--------------------------------------
这里有一个问题,就是有用到theme.less都要引入一次,很不方便
接下来实现全局加载theme.less
首先用npm或者yarn这三个
vue-cli-plugin-style-resources-loader style-resources-loader sass-resources-loader(前面两个装完不生效的话,可以尝试装它)
然后在vue.config.js新增pluginOptions配置
pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, 'src/assets/css/theme.less')] } }
最后将theme.less移到src/assets/css/重新 run 一下就可以了
后面会讲如何通过点击切换主题
https://segmentfault.com/a/1190000016047076
https://blog.csdn.net/u013884068/article/details/78186798
https://blog.csdn.net/LuckyMon/article/details/89923822
https://segmentfault.com/a/1190000016061608
先备份一下参考资料
相关文章
- autofac &web api 切换数据库
- IOS横竖屏切换
- iOS_21团购_Popover适应iPad横竖屏切换
- flutter开发仿抖音首页面上下滑动切换播放视频效果
- 45 双组件切换动画效果
- svn 创建分支、切换分支 及 合并分支 操作
- 上下文切换与多处理器
- npm切换淘宝镜像
- 修改windows自带的Ctrl+Space输入法切换快捷键
- 用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式
- 浅析如何实现根据图片自动切换背景色功能:提取图片主题色方案探索 - CSS提取(filter: blur + transform: scale)、Color Thief 工具库提取、对象存储的智能多媒体服务提供图片处理功能
- 浅析如何选择picture标签和img标签、如何使用 srcset 和 sizes 属性进行分辨率切换、如何使用picture标签的source和media在不同设备显示不同图像
- oracle 切换ORACLE_SID cat /u02/oracle/product/11.2.0/network/admin/tnsnames.ora cd /u02/oracle/product/11.2.0/dbs
- 快速切换manjaro为中国国内源