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.
}
}
终于这次运行可以了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vite+vue3+ts项目中提示无法找到模块的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
应公司需求,接口需要对接vue,记录一下碰到的问题,下面这篇文章主要给大家介绍了关于Vue项目中接口调用的详细讲解,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
近日项目中需要使用信息提示框的功能,ui组件库使用的是字节的arco-design-vue,看了一下,现有的Message不满足要是需求,直接使用message组件的话,改样式太麻烦,所以本文就本就介绍了基于Vue3+ts封装一个简单版的Message组件,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue 在服务器端直接修改请求的接口地址的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了mpvue小程序循环动画开启暂停的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了如何用vue设计一个日历表，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了对 Vue-Router 进行单元测试的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了vue实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue3使用ref与reactive创建响应式对象的示例代码
这篇文章主要详细介绍了Vue3使用ref与reactive创建响应式对象的方法步骤,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-02-02
在项目开发中有时候需求需要手动实现横屏功能,所以这篇文章主要为大家详细介绍了如何使用Vue实现手机横屏功能,需要的小伙伴可以参考一下2024-03-03
最新评论