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

最新推荐文章于 2023-07-02 09:42:10 发布

柒月梦

最新推荐文章于 2023-07-02 09:42:10 发布

阅读量658

点赞数

CC 4.0 BY-SA版权

分类专栏：踩得坑 Vue 文章标签： iview vue-cli less 定制主题

本文链接：https://blog.youkuaiyun.com/guo187/article/details/89003891

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

踩得坑

9 篇文章

订阅专栏

本文介绍如何在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