vue-cli3.0 iview自定义主题报错，完美解决方法(配置vue.config.js)

1.需要安装两个组件，使用以下两个命令安装：

npm install less --save-dev

 

npm install less-loader --save-dev

 

2.在src目录创建my-theme文件夹

创建index.less文件,放到my-theme文件夹

 

index.less文件内容：

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



@primary-color: #1fd3da;

 

3.根目录创建vue.config.js文件

vue.config.js文件内容

module.exports = {
    css: {
        loaderOptions: {
          less: {
            javascriptEnabled: true,
          }
        }
      },
}

（加入javascriptenabled:true这句，是因为不加的话，下面使用import './my-theme/index.less'会报错）

 

 

main.js文件，新增import './my-theme/index.less'

main.js文件内容：

import Vue from 'vue'
import App from './App.vue'
import './plugins/iview.js'

import './my-theme/index.less'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

 

iview.js文件，注释掉下面这一句

//import 'iview/dist/styles/iview.css'