vue cli使用iview自定义主题遇到的坑及解决

更新时间：2023年04月18日 14:45:13 作者：前端历劫之路

vue cli使用iview自定义主题遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue cli使用iview自定义主题遇到的坑

定制主题，这里讲变量覆盖

当你老老实实的把上面文档中的代码一一复制粘贴到项目文件中时，发现了还没装less,所以你就

npm install less –save 
npm install less-loader –save

结果呢

下面我们来解决他

我们找到项目根目录下build下的utils.js文件，把原来的（跟下面代码差不多）改成下面所示。

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less',{ javascriptEnabled: true }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

运行就ok了

iview主题定制化问题

1.项目中有需求：项目整体显示某个特定的颜色

2.使用 vue + iview

3.按照iview官网显示有两种方法，目前说第一种变量覆盖

4.按照官网的方法

如果你的项目使用了 webpack 工程，可以通过变量覆盖的方式来实现主题定制。

首先在项目中先建一个目录，比如 my-theme，然后在 my-theme 下建立一个 less 文件 index.less，并写入下面内容：

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

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

5.然后在入口文件 main.js 内导入这个 less 文件即可：

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

Vue.use(iView);

写完之后我开始运行，然儿报错了

问题报错是模块解析失败，于是找度娘，显示是less的问题，less装的是3.0以上的，度娘说需要3.0以下的，于是安装2.7.3版本，发现还是不行，emmm…虽然好多说都可以，但是我这边还是不行，于是在找，发现vue.config.js中需要配置less

module.exports = {
  css: {
    // extract: true, // 是否使用css分离插件 ExtractTextPlugin
    // sourceMap: false, // 开启 CSS source maps?
    loaderOptions: {
        less: {
            javascriptEnabled: true //less 配置
        }
    }, // css预设器配置项
    modules: false // 启用 CSS modules for all css / pre-processor files.
	}
}

终于这次运行可以了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue页面切换和a链接的本质区别详解
今天小编就为大家分享一篇Vue页面切换和a链接的本质区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue项目报错:Missing script:"serve"的解决办法
这篇文章主要给大家介绍了关于vue项目报错:Missing script:"serve"的解决办法,"missing script: serve"是一个错误信息,意味着在执行启动脚本时,找不到名为"serve"的脚本,需要的朋友可以参考下
2023-11-11
解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory
这篇文章主要介绍了解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue中el-upload上传图片到七牛的示例代码
这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单，需要从后台获取七牛token上传图片到七牛，具体示例代码大家跟随小编一起学习吧
2018-10-10
vue中watch监听不到变化的解决
本文主要介绍了vue中watch监听不到变化的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
详解vue2与vue3获取模版引用ref的区别
这篇文章主要为大家详细介绍了vue2与vue3中获取模版引用ref的方法与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-10-10
vue forEach循环数组拿到自己想要的数据方法
今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
element日期选择器el-date-picker样式图文详解
最近写的项目里面有一个功能是日期选择功能,第一反应是使用element里面的el-date-picker组件,下面这篇文章主要给大家介绍了关于element日期选择器el-date-picker样式的相关资料,需要的朋友可以参考下
2022-09-09
vue+elemet实现表格手动合并行列
这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
对vue中v-on绑定自定事件的实例讲解
今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09