Vue整合iView(ViewDesign)自定义主题index.less报错问题解决

问题描述

Vue项目中根据文档整合iView(VueDesign)的自定义主题，需要新建index.less，增加主题相关的代码。

报错如下：

 ERROR  Failed to compile with 1 error                                                                                                                        5:35:32 PM

 error  in ./src/my-theme/index.less

Syntax Error: 

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /idea_projects/node_modules/view-design/src/styles/color/bezierEasing.less (line 110, column 0)


 @ ./src/my-theme/index.less 4:14-228 15:3-20:5 16:22-236
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.2:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

解决方案

项目根目录(和package.json同一个目录层次)增加vue.config.js，内容如下：

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

};

如果你项目中已经存在这个文件，那么只需要增加上面代码中css的那部分内容。