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

本文介绍如何在Vue-cli项目中使用iview组件库定制主题颜色。通过新建less文件并覆盖变量,实现在main.js中导入定制样式。解决过程中遇到的less模块缺失及内联JavaScript配置问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天尝试在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\_iview@3.3.3@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                                          

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值