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,一经查实,立即删除!

相关文章

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

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

SCCM 2012系列1 服务器准备上

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

近期H5项目开发小结

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

依赖包报错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…

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

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

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

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

YUV视频格式分析

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

自定义ant中table表格的展开图标 修改ant-vue-design中嵌套表格table的expandIcon自定义图标

效果&#xff1a; 1. <a-table:expandIcon"expandIcon":loading"loading":columns"columns":data-source"data"class"components-table-demo-nested"change"onChangeTable":scroll"{x:1300,y:y}":p…

Foundationd和Application Kit的类层次

Foundationd类 Application Kit类 转载于:https://www.cnblogs.com/ikodota/archive/2012/08/01/2618590.html

dup和dup2的使用方法

/*本文通过标准输出的重定向和恢复的过程来解释dup和dup2的使用方法*/#include <stdio.h> #include <unistd.h>#include <fcntl.h>//STDIN_FILENO标准输入描述符&#xff08;0&#xff09;//STDOUT_FILENO标准输出描述符&#xff08;1&#xff09; //STDERR_…

python多线程编程(2): 线程的创建、启动、挂起和退出

From: http://www.cnblogs.com/holbrook/archive/2012/03/02/2376940.html 如上一节&#xff0c;python的threading.Thread类有一个run方法&#xff0c;用于定义线程的功能函数&#xff0c;可以在自己的线程类中覆盖该方法。而创建自己的线程实例后&#xff0c;通过Thread类的…

记录ie下报XMLHttpRequest: 网络错误 0x80070005, 拒绝访问。

问题&#xff1a; 同样的调用接口&#xff0c;在谷歌是没有问题的&#xff0c;但是在ie下报错XMLHttpRequest: 网络错误 0x80070005, 拒绝访问。 1.分析&#xff1a; 对比了一下&#xff0c;相同的是接口传递参数错误导致报错&#xff0c;传递的参数自动带上了 " "…

MVC3.0+DWZ探索

将themes 文件移到 js文件 index.html 转载于:https://www.cnblogs.com/acyy/archive/2012/08/03/2621594.html

棋盘覆盖

在一个2k x 2k ( 即&#xff1a;2^k x 2^k )个方格组成的棋盘中&#xff0c;恰有一个方格与其他方格不同&#xff0c;称该方格为一特殊方格&#xff0c;且称该棋盘为一特殊棋盘。在棋盘覆盖问题中&#xff0c;要用图示的4种不同形态的L型骨牌覆盖给定的特殊棋盘上除特殊方格以外…

VMM2012应用指南之12- 创建自助服务用户并分配云

河北经贸大学 王春海如果要在云中创建、管理虚拟机&#xff0c;首先要创建自助服务帐户&#xff0c;在创建用户角色的同时即可以分配云。本节介绍这部分内容。【说明】在做下面的这个操作的时候&#xff0c;需要向“库”服务器再添加另外一个库的路径&#xff0c;用于保存云中的…

解决vue项目在ie浏览器下白屏问题;ie运行项目报正在兼容性是图中运行,因为选中了“在兼容性视图中显示Intranet站点”

如果已经配置了babel-polyfill&#xff0c;在ie下依然白屏&#xff0c;打开控制台刷新&#xff0c;看看是否报 正在兼容性是图中运行&#xff0c;因为选中了“在兼容性视图中显示Intranet站点” 如图 解决方案 在ie浏览器—设置—兼容性视图设置&#xff08;B&#xff09;…

python多线程编程(4): 死锁和可重入锁

From: http://www.cnblogs.com/holbrook/archive/2012/03/08/2385449.html 在线程间共享多个资源的时候&#xff0c;如果两个线程分别占有一部分资源并且同时等待对方的资源&#xff0c;就会造成死锁。尽管死锁很少发生&#xff0c;但一旦发生就会造成应用的停止响应。下面看一…

ie浏览器跨域报错问题;Access-Control-Allow-Headers 列表不存在请求表头 content-type;XMLHTTPRequest:网络错误 0x80070005,拒绝访问。

问题&#xff1a; 这段是我在main.js下设置的&#xff0c;为了在请求头上添加后端需要的参数sessionId 和xrequestedwith &#xff0c;在谷歌下是正常的&#xff0c;ie报Access-Control-Allow-Headers 列表不存在请求表头 content-type&#xff1b;XMLHTTPRequest:网络错误 0x…

python多线程编程(5): 条件变量同步

From: http://www.cnblogs.com/holbrook/archive/2012/03/13/2394811.html 互斥锁是最简单的线程同步机制&#xff0c;Python提供的Condition对象提供了对复杂线程同步问题的支持。Condition被称为条件变量&#xff0c;除了提供与Lock类似的acquire和release方法外&#xff0c…