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

发布时间:2023-04-18 15:35:46 作者:iii
来源:亿速云 阅读:88

本篇内容主要讲解“vue cli使用iview自定义主题遇到的坑怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue cli使用iview自定义主题遇到的坑怎么解决”吧!

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

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

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

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

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

结果呢

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

下面我们来解决他

我们找到项目根目录下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 cli使用iview自定义主题遇到的坑怎么解决

到此,相信大家对“vue cli使用iview自定义主题遇到的坑怎么解决”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. win中如何安装,配置及操作mysql
  2. greenplum数据库python自定义函数

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vuecli iview

上一篇:pageHelper一对多分页怎么实现

下一篇:vue-cli4.0怎么配置CDN加速

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》