iview 2.6.0版本定制主题遇到的问题及解决方法

软件版本:

Node.js v8.9.0

npm 5.5.1

iView 2.6.0

vue-cli 2.9.1

项目创建:

用vue-cli创建一个webpack的Vue项目:

使用npm完成基本安装后,通过npm命令安装iVIew:

npm install iview --save

文档配置完成后在src/components/HelloWorld.vue随便写一个iView的component:

<Button type="primary" shape="circle" icon="ios-search"></Button>
<Button type="primary" icon="ios-search">Search</Button>
<Button type="primary" shape="circle" icon="ios-search">Search</Button>
<Button type="primary" shape="circle">Circle</Button>

然后遵循文档的定制主题的内容进行定制操作,关于webpack工程定制主题,文档是这么说的:

这里文档中有几个文档中没说到的问题,首先需要安装less和less-loader两个组件

npm install --save-dev less-loader less

然后参考gijo-varghese的回答在build/webpack.base.conf.js中的extensions

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

需要增加一个.less

  resolve: {
    extensions: ['.js', '.vue', '.json', '.less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

然后主题就修改成功了:

 

 

 

iview 2.6.0版本定制主题遇到的问题及解决方法》上有7个想法

发表评论

电子邮件地址不会被公开。