Iview4 the method of using custom theme after CDN loading

Time:2021-7-27

Iview4 loading using CDN

Index.html (the address in href and Src can be replaced with the corresponding CDN address)

<head>
  <link href="./lib/iview/styles/iview.css" rel="stylesheet" />
</head>

<body>
  <script></script>
</body>

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'view-design': 'iview',
      iview: 'ViewUI',
    }
  }
}

Using custom themes

Since iView is introduced using CDN, the following methods on the official website cannot be used.

@import '~view-design/src/styles/index.less';

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

We need to manually put the files in the styles folder of the iView project into our own project (go to GitHub of iview4 to download)
Iview4 the method of using custom theme after CDN loading
After downloading, create a new iView_ Change.less file, modify the official website import code to (the specific import address is the styles folder address of iView under your project)

@import '[email protected]/dil/iViewUI/styles/index.less';

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

Finally, iView is introduced

import Vue from 'vue'
import ViewUI from 'view-design'
import '@/css/iview_change.less'

Vue.use(ViewUI, {
  transfer: true
})

After completing the above operations, iview4 using CDN to load, you should be able to use custom themes normally. Your project package file will no longer need to bring iView, resulting in larger size.