ant更改主题色报错Inline JavaScript is not enabled. Is it set in your options? vue ant主题色更改 vue-cli3

  • 问题:使用vue-cli3更改ant的主题色时候报错:Inline JavaScript is not enabled. Is it set in your options?

  • 原因:我的问题是less-loader依赖包的版本为5.0.0,而官方要求必须是6.0.0;

  • List item

 ERROR  Failed to compile with 1 errors                                                                         16:02:25error  in ./node_modules/ant-design-vue/dist/antd.lessModule 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 C:\Users\***\node_modules\ant-design-vue\lib\style\color\bezierEasing.less (line 110, column 0)@ ./node_modules/ant-design-vue/dist/antd.less 4:14-188 14:3-18:5 15:22-196@ ./src/main.js@ multi (webpack)-dev-server/client?http://172.18.17.39:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

问题点排查

  • 是否使用了less和less-loader:如果项目使用的是scss/sass预处理器,则需要安装less和less-loader,vue-cli3已经在底层预留了less配置,因此无需查找文件添加配置
cnpm install less less-loader --save-dev
  • 样式不生效问题:设置好需要重新启动
  • less 的样式被 css 的样式覆盖:如果你在使用 babel-plugin-import 的 style 配置来引入样式,需要将配置值从 ‘css’ 改为 true,这样会引入 less 文件。
  • 如果在marn.js中你是通过 ‘ant-design-vue/dist/antd.css’ 引入样式的,改为 'ant-design-vue/dist/antd.less’
  • 在vue cli 3 中定制主题:项目根目录下新建文件vue.config.js
    注意:less-loader依赖包的版本一定要是6.0.0或以上
module.exports = {
//vue-cli3修改ant的主题色官网配置   vue.config.js for less-loader@6.0.0 ||||||||注意less-loader依赖包的版本一定要是6.0.0或以上|||||||css: {loaderOptions: {less: {lessOptions: {modifyVars: {'primary-color': '#ff1f', // 全局主色  #1890ff'link-color': '#1890ff', // 链接色'success-color': '#52c41a', // 成功色'warning-color': '#faad14', // 警告色'error-color': '#f5222d', // 错误色'font-size-base': '14px', // 主字号'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色'border-radius-base': '4px', // 组件/浮层圆角'border-color-base': '#d9d9d9', // 边框色'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影},javascriptEnabled: true,},},},}
}
  • 其他webpack 和 vue cli 2 中定制主题,可看官网ant自定义主题
  • 亲测有用,希望帮助到你!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】文件操作系统调用

一. 文件描述符 在Linux下使用文件描述符来表示设备文件和普通文件。文件描述符是一个整型的数据,所有对文件的操作都通过文件描述符实现。文件描述符的范围是0~OPEN_MAX,系统中有3个已经分配的文件描述符,即标准输入、标准输出、和标准错误&…

sysfs接口函数的建立_DEVICE_ATTR

最近在弄Sensor驱动,看过一个某厂家的成品驱动,里面实现的全都是sysfs接口,hal层利用sysfs生成的接口,对Sensor进行操作。说道sysfs接口,就不得不提到函数宏 DEVICE_ATTR原型是#define DEVICE_ATTR(_name, _mode, _sho…

ant中table表格的多选框如何清空

项目需求:表格前加一列多选框,可以做多选和提交,还可以在提交后、重置或者翻页后对多选框清空 使用的组件是ant中下的可操作选择的table;这样我们就知道复选框选中的那些数据id,其实就是selectedRowKeys数组里的id&am…

SCCM 2012系列1 服务器准备上

各位您好,今天我将开始给大家分享微软最新的SCCM 2012系列文章,让大家逐步了解在企业内如何搭建SCCM 2012的同时,了解各个功能模块,对应自己的企业环境来看,那些功能是您现在所需要的。当然还可以看看SCCM 2012比之前…

linux内核源代码分析----内核基础设施之klist

概述klist是list的线程安全版本,他提供了整个链表的自旋锁,查找链表节点,对链表节点的插入和删除操作都要获得这个自旋锁。klist的节点数据结构是klist_node,klist_node引入引用计数,只有点引用计数减到0时才允许该node从链表中移…

近期H5项目开发小结

前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动)。主要是新品牌的推广需要,当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广&#xff…

vue-cli3中的vue.config.js配置

vue-cli3中的vue.config.js配置 我的跨域是配置通过chrome浏览器的跨域设置,前端修改跨域问题,以此解决跨域的, 故如果需要配置代理,就看proxy部分; const path require(path) const resolve (dir) > path.join…

获取python版本

import sys# global variablepyVersion 2 # set default python version to 2.x# init global variable(s)def init():global pyVersionpyVersion sys.version_info[0] # get major version of pythondef test():print(pyVersion)if __name__ __main__:init()test()运行情况…

会计的思考(37):“弱水三千,只取一瓢饮”--业务人员的财务意识

关键字: 会计体系 财务意识 投入产出 "任凭弱水三千,我只取一瓢饮", 出自《红楼梦》,第九十一回里,贾宝玉曾经这样语带机锋地试图去化解林黛玉刚刚上来的醋劲。本文以此引出对业务人员的财务意识的思考。 成功企业家,如…

编译QtAV工程库

去https://github.com/wang-bin/QtAV下载源代码 去https://sourceforge.net/projects/qtav/files/depends/QtAV-depends-windows-x86%2Bx64.7z/download下载依赖库QtAV-depends-windows-x86x64.7z 将里面的include目录内容和lib内容分别拷贝到Qt的include和lib目录下 QtAV解压后…

make -j32 21 | tee show.log

2. 2>&1是什么意思?2>&1应该分成两个部分来看,一个是2>以及另一个是&1,其中2>就是将标准出错重定向到某个特定的地方;&1是指无论标准输出在哪里。所以2>&1的意思就是说无论标准出错在哪里(哪怕…

依赖包报错Invalid options object. Less Loader has been initialized using an options object that does not

1.问题:yarn安装依赖包,启动项目报错 error in ./node_modules/ant-design-vue/dist/antd.less Module build failed: ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the A…

Windows下显示目录大小及文件个数

From: http://blog.csdn.net/wmnothing/article/details/6590376 用批处理实现Windows下子目录大小统计功能 吴旻 泰岩网络工作室 统计当前目录下各文件夹的大小,在Linux下面比较简单,一个 du -sh * 命令就基本解决问题了。虽然在资源管理器是单击右键…

Asp.net页面和Html页面之间的关系

Asp.net页面显然要转化为普通的html页面才能在浏览器中显示,但是对于两者的关系,或者说从服务器在接受请求处理请求这段时间内对asp.net页面的操作一直不是很明白,下边的一段话可以让人豁然开朗,虽然并未谈论技术,但简…

kmalloc/kfree,vmalloc/vfree函数用法和区别

1.kmalloc1>kmalloc内存分配和malloc相似&#xff0c;除非被阻塞否则他执行的速度非常快&#xff0c;而且不对获得空间清零.< tiger说明&#xff1a;在用kmalloc申请函数后&#xff0c;要对起清零用memset()函数对申请的内存进行清零。> 2>kamlloc函数原型&#xf…

SQL Server开发接口生成方法

为提高开发效率&#xff0c;生成固定格式的接口是必须的&#xff0c;以下以提供新增/修改/删除/读取接口为例&#xff1a; 以常见的表结构为例&#xff0c;特殊表结构可自己尝试去调整方法 主要通过系视图 sys.columns生成方法:为包含列的对象&#xff08;如视图或表&#xff0…

vue-cli2定制ant-design-vue主题

本篇是vue-cli2定制主题&#xff0c;vue-cli3通过vue.config.js定制主题点击此处 1.引入less和less-loader&#xff08;如果报错&#xff0c;请将less-loader版本更改到5.0.0&#xff09; npm install less less-loader --save2.在 vue cli 2 中定制主题&#xff0c;修改build…

python中thread的setDaemon、join的用法

From: http://doudouclever.blog.163.com/blog/static/17511231020127232303469/ python中得thread的一些机制和C/C不同&#xff1a;在C/C中&#xff0c;主线程结束后&#xff0c;其子线程会默认被主线程kill掉。而在python中&#xff0c;主线程结束后&#xff0c;会默认等待子…

谈谈软件兼容性测试

1.软件兼容性测试兼容性测试之待测试项目在特定的硬件平台上&#xff0c;不同的应用软件不同&#xff0c;不同的操作系统平台上&#xff0c;在不同的网络等环境中能正常的运行的测试。兼容性测试的目的&#xff1a;带测试项目在不同的操作系统上正常运行&#xff0c;包括待测试…

YUV视频格式分析

Andrew Huang <bluedrum163.com> 转载请注明作者及联络方式在摄像头之类编程经常是会碰到YUV格式,而非大家比较熟悉的RGB格式. 我们可以把YUV看成是一个RGB的变种来理解.YUV的原理是把亮度与色度分离&#xff0c;研究证明,人眼对亮度的敏感超过色度。利用这个原理&#x…