vue工程更改ivew组件主题颜色

                                vue工程更改ivew组件主题颜色

1、描述

更改ivew组件的主题颜色,如下比较:

vue工程更改ivew组件主题颜色_第1张图片

vue工程更改ivew组件主题颜色_第2张图片

2、实现步骤

通过webpack搭建好了一个vue工程,安装ivew插件,所有程序正常使用的情况下

1、终端执行命令 npm i iview-theme -g

2、项目工程下,新建一个文件夹my-theme, 在该文件夹下新建文件index.less,编辑如下:

vue工程更改ivew组件主题颜色_第3张图片

@import '~iview/src/styles/index.less';
// Here are the variables to cover, such as:
@primary-color: #3f9836;

3、在文件src/main.js,添加如下:import '../my-theme/index.less'

vue工程更改ivew组件主题颜色_第4张图片

拓展:

1、如果是希望修改其他的颜色,也是直接在文件 ( 项目名/my-theme/index.less)中添加即可

2、如果报错如下:

vue工程更改ivew组件主题颜色_第5张图片

解决方法:

修改文件build\utils.js,添加代码  { javascriptEnabled: true },  如下:

vue工程更改ivew组件主题颜色_第6张图片

 

觉得有用,请给个点赞哈;

有其他想法,请分享给我哈(微信:13527614919)

你可能感兴趣的:(vue前端)