iview4使用CDN加载后使用定制主题的方法

悠哉悠哉

iview4使用CDN加载

index.html(href与src里面的地址可以替换成对应cdn地址)

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

<body>
  <script src="./lib/iview/iview.min.js"></script>
</body>

vue.config.js

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

使用定制主题

由于是使用cdn引入iview,所以官网的下面这种方式就不可以用了。

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

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

我们要手动把iview项目里面的styles文件夹的文件放到自己的项目里面(去iview4的GitHub下载)
image.png
下载后,新建iview_change.less文件,把官网引入代码修改为(具体引入地址为自己项目下iview的styles文件夹地址)

@import '~@/dil/iViewUI/styles/index.less';

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

最后引入iview

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

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

做完上面的操作后,iview4使用cdn加载后应该可以正常的使用定制主题了。你的项目打包文件再也不用带上iview导致变大了。

阅读 293

宅一宅、睡一睡、打打代码

3 声望
0 粉丝
0 条评论
你知道吗?

宅一宅、睡一睡、打打代码

3 声望
0 粉丝
宣传栏