vue-cli3设置iview自定义主题

vue-cli3将webpack的配置都简化了，如果需要进行一些配置，需要在vue.config.js中进行配置。 iview的自定义主题使用的是less的变量覆盖，需要自定义一个less文件去覆盖iview原始的变量值。

如果不进行一下配置会出现以下的错误

Module build failed (from ./node_modules/less-loader/dist/cjs.js):
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
	  in /el-admin/node_modules/iview/src/styles/color/bezierEasing.less (line 111, column 0)

上述错误需要将less的javascriptEnabled设置为true，那么如何在vue-cli3中进行配置呢？

配置步骤：

1、iview创建自定义主题样式文件，可以参考官网的案例 戳我

2、配置vue.config.js文件

module.exports = {
	css: { // 配置css模块
    	loaderOptions: { // 向预处理器 Loader 传递配置选项
        	less: { // 配置less（其他样式解析用法一致）
            		javascriptEnabled: true // 设置为true
        	}
    	}
	}
}

以上的配置可以参考VueCli文档 戳我

通过以上的配置，就可以在vue-cli3中愉快的自定义iview的主题啦。

转载于:https://my.oschina.net/zjhlearn/blog/1920642