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；

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自定义主题
• 亲测有用，希望帮助到你！

总结

以上是生活随笔为你收集整理的ant更改主题色报错Inline JavaScript is not enabled. Is it set in your options? vue ant主题色更改 vue-cli3的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。