今天尝试在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