vue-cli引入iview3.x使用less更换主题的过程

vue-cli引入iview3.x使用less更换主题的过程

按照iview官方的文档定制主题,webpack编译时会有个坑，下面简述一下主要过程

1，npm install iview –save
2，npm install less –save
2，npm install less-loader –save
4,修改util.js中的less配置，

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',{ javascriptEnabled: true }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

5，在src下新建theme/index.less

@import '~iview/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

6,在main.js中引入自定义的less文件即可

import Vue from 'vue';
import iView from 'iview';
import './theme/index.less';

Vue.use(iView);

---