vue自定义iview主题踩坑记

前言

因为当前项目使用的是iview组件，但是由于其组件样式对于我们自己的项目来说样式需要进行调整，因此我们就需要对其进行样式的调整。于是就打开官网进行主题定义，然而就是一堆坑，下面我们一起来看看有哪些坑。

定制主题

变量覆盖

在项目中新建一个目录，例如theme，在其下建立一个 less 文件index.less，并写入以下内容：

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

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

然后再入口文件main.js中导入这个 less 文件即可.

import '../theme/index.less';

以上是官网所说的教程，然后我们如果真的这样去使用，就会有几个坑。

问题

bezierEasingMixin() 报错

当我们运行的时候我们会出意外的不出意外的遇到这样的错误提示：

Syntax Error:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

为什么会有这样的错误呢？原因很简单，那就是我们没有去配置相应的 less-loader。因此我们这个时候就需要去安装相应的 loader。

npm install less less-loader -d

安装完后，我们需要修改vue.config.js文件

module.exports = {
  ...
  css:{
    loaderOptions:{
      less:{
        lessOptions:{
          javascriptEnabled: true
        }
      }
    }
  }
  ...
}

这里需要注意，由于我们现在安装的话，less-loader以及 less 的版本是比较高的。 所以我们在网上搜到的下面的方案

module.exports = {
  ...
  css:{
    loaderOptions:{
      less:{
          javascriptEnabled: true
      }
    }
  }
  ...
}

会直接报下面的错误：

Syntax Error: ValidationError: Invalid options object. Less Loader has been initialized using an options object 
that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, additionalData?, sourceMap?, webpackImporter?, implementation? }

原因就是版本问题。按照我上面的配置即可

evaluating function unit: 报错

我们继续执行编译，会得到另一个错误，那就是

Syntax Error: 
    .@{tag-close-prefix-cls} {
        .iconfont-size-under-12px(20px);
      ^
Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?

这个的原因呢，是因为less的计算方法问题，因为在3.X版本中默认值是always,但是在4.x版本后就变成了parens-division。详细可以看lees-loader配置。因此我们就需要在上面的配置中增加下处理即可：

module.exports = {
  css:{
    loaderOptions:{
      less:{
        lessOptions:{
          javascriptEnabled: true,
          math: 'always'
        }
      }
    }
  }
}

这个时候我们在运行，就会发现完全没问题了。 如果觉得文章对你有帮助，可以点个赞，点个关注哦