There's been a few fixes to Antd since 4.0.0..., more concretely one that throws errors to console when using the Space component. So after playing with it, I managed to get it working by changing the base file used for the less_hack. I don't seem to be able to push a new branch, so here's the fix:
Line 5, index.ts
hack_less: ``true:rue;@import "${require.resolve('antd/lib/style/themes/default.less')}";``,
(can't seem to escape literals properly here)
If you (like me) don't want to wait, or want to have it in a single file instead of a dependency for some reason, I managed to make it work all the same just by adding the transcribed file file (and insert its output to modifyVars):
var __assign = (this && this.__assign) || function () { __assign = Object.assign || function (t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __importDefault = (this && this.__importDefault) || function (mod) { return mod && mod.__esModule ? mod : { default: mod }; }; Object.defineProperty(exports, '__esModule', { value: true }); /* eslint-disable @typescript-eslint/camelcase */ var dark_theme_1 = __importDefault(require('antd/dist/dark-theme')); exports.default = __assign( __assign( { hack_less: 'true:rue;@import "' + require.resolve('antd/lib/style/themes/default.less') + '";', //+ }, dark_theme_1.default ), { '@light': '#fff', '@tabs-horizontal-padding': '12px 0', // zIndex': 'notification > popover > tooltip '@zindex-notification': '1063', '@zindex-popover': '1061', '@zindex-tooltip': '1060', // width '@anchor-border-width': '1px', // margin '@form-item-margin-bottom': '24px', '@menu-item-vertical-margin': '0px', '@menu-item-boundary-margin': '0px', // size '@font-size-base': '14px', '@font-size-lg': '16px', '@screen-xl': '1208px', '@screen-lg': '1024px', '@screen-md': '768px', // 移动 '@screen-sm': '767.9px', // 超小屏 '@screen-xs': '375px', // 官网 '@site-text-color': '@text-color', '@site-border-color-split': 'fade(@light, 5)', '@site-heading-color': '@heading-color', '@site-header-box-shadow': '0 0.3px 0.9px rgba(0, 0, 0, 0.12), 0 1.6px 3.6px rgba(0, 0, 0, 0.12)', '@home-text-color': '@text-color', //自定义需要找设计师 '@gray-8': '@text-color', '@background-color-base': '#555', '@skeleton-color': 'rgba(0,0,0,0.8)', // pro '@pro-header-box-shadow': '@site-header-box-shadow', } );
Thanks!
There's been a few fixes to Antd since 4.0.0..., more concretely one that throws errors to console when using the Space component. So after playing with it, I managed to get it working by changing the base file used for the less_hack. I don't seem to be able to push a new branch, so here's the fix:
Line 5, index.ts
hack_less: ``true:rue;@import "${require.resolve('antd/lib/style/themes/default.less')}";``,(can't seem to escape literals properly here)
If you (like me) don't want to wait, or want to have it in a single file instead of a dependency for some reason, I managed to make it work all the same just by adding the transcribed file file (and insert its output to modifyVars):
var __assign = (this && this.__assign) || function () { __assign = Object.assign || function (t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __importDefault = (this && this.__importDefault) || function (mod) { return mod && mod.__esModule ? mod : { default: mod }; }; Object.defineProperty(exports, '__esModule', { value: true }); /* eslint-disable @typescript-eslint/camelcase */ var dark_theme_1 = __importDefault(require('antd/dist/dark-theme')); exports.default = __assign( __assign( { hack_less: 'true:rue;@import "' + require.resolve('antd/lib/style/themes/default.less') + '";', //+ }, dark_theme_1.default ), { '@light': '#fff', '@tabs-horizontal-padding': '12px 0', // zIndex': 'notification > popover > tooltip '@zindex-notification': '1063', '@zindex-popover': '1061', '@zindex-tooltip': '1060', // width '@anchor-border-width': '1px', // margin '@form-item-margin-bottom': '24px', '@menu-item-vertical-margin': '0px', '@menu-item-boundary-margin': '0px', // size '@font-size-base': '14px', '@font-size-lg': '16px', '@screen-xl': '1208px', '@screen-lg': '1024px', '@screen-md': '768px', // 移动 '@screen-sm': '767.9px', // 超小屏 '@screen-xs': '375px', // 官网 '@site-text-color': '@text-color', '@site-border-color-split': 'fade(@light, 5)', '@site-heading-color': '@heading-color', '@site-header-box-shadow': '0 0.3px 0.9px rgba(0, 0, 0, 0.12), 0 1.6px 3.6px rgba(0, 0, 0, 0.12)', '@home-text-color': '@text-color', //自定义需要找设计师 '@gray-8': '@text-color', '@background-color-base': '#555', '@skeleton-color': 'rgba(0,0,0,0.8)', // pro '@pro-header-box-shadow': '@site-header-box-shadow', } );Thanks!