vue cli3 定制vant主题色及设置全局less变量

您所在的位置：网站首页 › vant定制主题不生效 › vue cli3 定制vant主题色及设置全局less变量

vue cli3 定制vant主题色及设置全局less变量

2023-07-25 22:53| 来源: 网络整理| 查看: 265

vue-cli3定制vant主题色

安装 cnpm i babel-plugin-import -D

babel.config.js

module.exports = { presets: ['@vue/app'], plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: name => `${name}/style/less` }, 'vant' ] ] }

vue.config.js

module.exports = { css: { loaderOptions: { less: { modifyVars: { red: '#d6426a', blue: '#7b8cce', orange: '#f08d49', 'text-color': '#111' } } } } }

使用例子： demo.vue

demo页默认按钮主要按钮信息按钮警告按钮危险按钮 import { Button, Field, Cell, CellGroup } from 'vant' export default { components: { [Button.name]: Button, [Field.name]: Field, [Cell.name]: Cell, [CellGroup.name]: CellGroup }, data() { return { value: '' } } } div { font-size: @fontSize1; } image.png vue-cli3设置全局变量

安装

cnpm i style-resources-loader -S cnpm i vue-cli-plugin-style-resources-loader -S

vue.config.js

module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [path.resolve(__dirname, 'src/assets/css/mixin.less')] } } }

minxin.less

// 设置全局变量 @minWidth: 1440px; @headerHeight: 80px; @primary: #0590ff; @info: #34bfa3; @warning: #f5a623; @danger: #f25151; @border: #ebedf2; @fontSize1: 14px; @fontSize2: 16px;

任意文件使用

div { font-size: @fontSize1; }

github项目地址：https://github.com/SmaVivian/vue-cli3-h5-init.git

【本文地址】

vue cli3 定制vant主题色及设置全局less变量

vue cli3 定制vant主题色及设置全局less变量

今日新闻

推荐新闻