由于项目需要,设计稿中大量使用的 #FE0101 红色色值。

iView默认色值为天空蓝,所以为了避免大量修改色值,在nuxt中修改iview主题色很有必要。

 

nuxt中定制iview主题颜色

iView官网给出的方案是用变量来覆盖的思路,覆盖主题颜色。

step1:在nuxt项目中添加index.less文件:

nuxt中定制iview主题颜色

内容如下:

nuxt中定制iview主题颜色

这段代码首先引入了iview的原有样式文件,然后用新的变量颜色覆盖。

下面的操作很自然就是在使用iView组件之前将我们创建的index.less引入:

step2:引入我们创建的index.less:

nuxt中定制iview主题颜色

nuxt中定制iview主题颜色

注释部分是原有的iview.css,使用的是默认的样式,现在改为引入我们新创建的index.less。

nuxt中使用iView,仅仅写了上面iview.js代码,上面代码是没有执行的,需要将其配置到nuxt的pulgins插件中,配置在该插件中的插件,会在实例化vue.js前执行。

step3:将ivew.js添加到plugins配置项中(在nuxt中使用插件时都需要这么做):

nuxt中定制iview主题颜色

由于我们使用了less,需要安装less,less-loader

step4:安装less,less-loader(该步骤不分先后,在之前安装过了也行)

nuxt中定制iview主题颜色

简单说下 -save-dev 与 -save 的区别:

-save-dev:将模块安装到dev环境下的依赖库中,在生产模式下是不需要这个模块的,比如:less,处理后的生产环境变为css文件。

-save:将模块安装到生产环境下的依赖库中,在生产模式下需要该模块的,比如:express

 


安装完毕后尝试run一下项目:

nuxt中定制iview主题颜色

less ^3.0版本以上会报该错误,需要在构建时启用 javascriptEnabled:

step5:启用javascriptEnabled:

nuxt中定制iview主题颜色

再次启动项目即可。

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-07-19
  • 2022-01-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-07
  • 2021-05-12
  • 2022-01-17
相关资源
相似解决方案