iview定制主题是报错Inline JavaScript is not enabled.

今天尝试在vue-cli项目中使用iview定制一下主题。按照官网的步骤。新建一个文件夹，新建一个index.less文件。

变量覆盖（推荐） #
如果你的项目使用了 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;

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

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

Vue.use(iView);

这里需要注意的是：css、less文件的引入必须在其它JS文件或vue文件后面，不然会报错，被这个坑了。

然后运行项目的时候，可能会找不到less、less-loader模块。对应的装一下。

 Cannot find module 'less'

然后接下来就遇到

Module build failed:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in C:\code\vsCodeProject\publicSecurity\node_modules\[email protected]@iview\src\styles\color\bezierEasing.less (line 110, column 0)

这个错误。意思是iview里面的less文件中使用了行内的JS。这里需要配置一下，在build文件夹下的utils.js文件中加入 javascriptEnabled:true。大概在37行的位置。

 if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap,
          javascriptEnabled:true
        })
      })
    }

然后就可以啦。

 I  Your application is running here: http://localhost:8080