-
问题:使用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自定义主题
- 亲测有用,希望帮助到你!