vue+vant2—篇3—定制主题色

step1：在main.js中引入样式源文件

//main.jsimport 'vant/lib/index.less'// 切记：为了能够覆盖默认的 less 变量，这里一定要把后缀名改为 .less

step2：创建theme.less，并在theme.less中修改主题色

//theme.less@green: #ff6f4b;
@orange: #e6a23c;
@skeleton-row-background-color: #fff;

step3：修改样式变量，在vue.config.js中配置

使用 Less 提供的 modifyVars 即可对变量进行修改

//vue.config.js
const { resolve } = require('path')
const themePath = resolve('src/assets/css/theme.less')module.exports = {css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。// lessOptions: {modifyVars: {// 直接覆盖变量// 'text-color': '#111',// 'border-color': '#eee',// 或者可以通过 less 文件覆盖（文件路径为绝对路径）hack: `true; @import "${themePath}";`},// },},},},
}

vue+vant2—篇3—定制主题色相关推荐

Ant-design-vue定制主题色
Ant-design-vue定制主题色要求:框架本身使用的蓝色主题色,需要更换成UI指定的颜色. Ant Design Vue 的样式变量 antd 的样式使用了 Less 作为开发语言,并定义了一 ...
Vue使用scss变量控制主题色
原理将变量注入到body的样式里,改变主题色的时候修改变量的颜色即可. scss变量 --color:red 放body的好处是全局可用. if(sheme==="dark"){d ...
vue + iview + less 定制主题色
vue项目中使用的是webpack,这里使用变量覆盖的方式实现. 新建less文件,用于存放新的主题,如:src/my-theme/index.less @import '~view-ui-plus/ ...
Ant design vue中实现动态更换主题色
一.创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能, 根据需求选择配置功能这里最好选择2.0版本, 可以 ...
vue + element-UI 实现深色模式和主题色动态切换
vue + element-UI 实现深色模式和主题色动态切换文章目录 vue + element-UI 实现深色模式和主题色动态切换前言深色模式和主题色动态切换本地样式切换主题色切换 el ...
ant更改主题色报错Inline JavaScript is not enabled. Is it set in your options? vue ant主题色更改 vue-cli3
问题:使用vue-cli3更改ant的主题色时候报错:Inline JavaScript is not enabled. Is it set in your options? 原因:我的问题是less ...
element-plus 更换主题色
element-plus 更换主题色场景: 简单的定制主题色,并不需要有按钮切换主题色. 实现: 在项目中新建你的theme.scss,代码如下: // style/element/index.sc ...
【Vue 开发实战】实战篇 # 42：如何定制主题及动态切换主题
说明 [Vue 开发实战]学习笔记. vuecli3 配置 module.exports = {css: {loaderOptions: {less: {modifyVars: {'primary-c ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...

vue+vant2—篇3—定制主题色

vue+vant2—篇3—定制主题色相关推荐

最新文章

热门文章