VueCli2 中Vant定制主题的配置

news/2024/7/9 23:52:58 标签: vue, vue.js

1、首先安装依赖

npm install -D less@3 less-loader@5

注意这里less和less-loader的版本不能太高,太高会报错

2、在main.js中引入vant的less文件

import 'vant/lib/index.less';

在这里插入图片描述
3、创建自定义主题变量文件less
如下比如,resetui.less:

@red: #07c160;
@blue: #2897ff;

四、修改配置文件中utils.js的代码
①、源代码

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

②、修改后代码

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less', {
      modifyVars: {
        'hack': `true; @import "${path.join(__dirname, '../src/styles/resetui.less')}";`
      }
    }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

需要注意的是${path.join(__dirname,‘自己的less文件所在位置’)}是获取绝对路径。


http://www.niftyadmin.cn/n/1770328.html

相关文章

cli4配置vue.config.js文件时常见的问题

问题一: 执行npm run build的时候 导致以上报错的原因是compression-webpack-plugin这个插件的版本过高; 解决方法是卸载掉高版本安装低版本,执行命令如下: npm uninstall compression-webpack-plugin npm install compression-…

vue 中h5页面自适应的实现

有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在写rem数值的时候,都需要对设计图原始的px值进行一番换算。 当当当当,来介绍一下两个好朋友,…

vue 路径@

1、是webpack定义的别名,在js中可以使用,如下: import util from /assets/js/util注:import xxxxx是js语法,所以可以使用别名 2、这个是在webpack.base.config.js中配置的,如下: resolve: {e…

vue 父组件中调用子组件的方法

Vue项目中如何在父组件中直接调用子组件的方法&#xff1a; 方案一&#xff1a;通过ref直接调用子组件的方法&#xff1b; //父组件中<template><div><Button click"handleClick">点击调用子组件方法</Button><Child ref"child&qu…

Vue 子组件调用父组件的方法

Vue项目中如何在子组件中直接调用父组件的方法&#xff1a; 方法一&#xff1a; 直接在子组件中通过this.$parent.event来调用父组件中的方法 //父组件 <template><div><child></child></div> </template> <script>import child f…

vue 生成二维码

一、页面中生成二维码方法 ①、首先安装qrcodejs2插件 npm install qrcodejs2 --save注意&#xff1a;安装完成之后可以在main.js中全局配置&#xff0c;也可以在单个页面中去引用 ②、引入 1&#xff09;单页面中引入 import QRCode from qrcodejs2;2&#xff09;全局配置…

elementUI中 form表单自定义验证方法

一、在form表单中经常去验证一些内容&#xff0c;有的是只比较简单的一些提示&#xff0c;有的则是需要自定义&#xff0c;实现方法如下&#xff1a; <template> <el-form :model"ruleForm2" :rules"dataRule" ref"dataForm" keyup.en…

elementUi 按钮点击之后取消状态

elementUi 中的按钮&#xff0c;点击操作之后按钮的状态会一直存在&#xff0c;如果想要取消的话就手动触发一下&#xff0c;如下&#xff1a; let target evt.target; if(target.nodeName "SPAN"){target evt.target.parentNode;}target.blur();点击的时候去执行…