AntのデザインテーマのカスタマイズはここにあるAntのデザインテーマをカスタマイズするための1.4

Question

の指示に反応しますか？ 「より少ない変数をオーバーライドする（別の方法で）」が正しい使用方法ですか？ LESSファイルはどこに行き、Reactでどのようにアクセスするのですか？

Answer 1

.babelrcの詳細については、arcomの回答と同様です。これは2.7.1をantd使用して働いていた：、antd変数にアクセスし、新しい値がオーバーライドデフォルト

@import '{}/node_modules/antd/dist/antd.less'; 

// Color 
@primary-color   : @green-6; 

は

theme.lessで

meteor npm i --save babel-plugin-transform-class-properties babel-root-slash-import 

にインストールさ

{ 
    "plugins": [ 
    "transform-class-properties", 
    "babel-root-slash-import" 
    ] 
} 

.babelrcであります

Answer 2

babel-plugin-importを使用する場合は、ファイルの数が少なくなります。ローダーを少なくするようにWebpackを設定するだけです。テーマをカスタマイズしたい場合は、less loaderにmodifyVarオプションを追加すれば、それがあなたのために置き換えられます。

あなたは、私がそれに続き、それが（流星のために）少ないパッケージを追加 https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138

Answer 3

• を働いていた、その設定ファイルを確認することができます
• は、クライアント側のtheme.lessファイル
• ペーストを追加しますアリ
• からデフォルト少ない変数で、必要に応じてカスタマイズ

ファイルが少ない例：

@import '{}/node_modules/antd/dist/antd.less'; 



@font-face { 
    font-family: 'Bariol_Bold'; 
    src: url('/fonts/Bariol_Bold.otf'); 
} 

@font-face { 
    font-family: 'Bariol_Bold_italic'; 
    src: url('/fonts/Bariol_Bold_italic.otf'); 
} 

@font-face { 
    font-family: 'Bariol_Light'; 
    src: url('/fonts/Bariol_Light.otf'); 
} 

@font-face { 
    font-family: 'Bariol_Light_italic'; 
    src: url('/fonts/Bariol_Light_italic.otf'); 
} 

@font-face { 
    font-family: 'Bariol_Thin'; 
    src: url('/fonts/Bariol_Thin.otf'); 
} 

@font-face { 
    font-family: 'Bariol_Thin_italic'; 
    src: url('/fonts/Bariol_Thin_italic.otf'); 
} 




// Prefix 
@ant-prefix    : ant; 

// Color 
//@primary-color   : #108ee9; 
@primary-color   : #d70b52; 
@success-color   : #87d068; 
@error-color   : #f50; 
@highlight-color  : #f50; 
@warning-color   : #fa0; 
@normal-color   : #d9d9d9; 

// ------ Base & Require ------ 
@body-background  : #fff; 
@component-background : #fff; 
@font-family   : 'Bariol_Thin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; 
@code-family   : Consolas, Menlo, Courier, monospace; 
@text-color    : #666; 
@heading-color   : #404040; 
@text-color-secondary : #999; 
@font-size-base   : 12px; 
@font-size-lg   : @font-size-base + 2px; 
@line-height-base  : 1.5; 
@border-radius-base  : 4px; 
@border-radius-sm  : 2px; 

// ICONFONT 
@iconfont-css-prefix : anticon; 
@icon-url    : "https://at.alicdn.com/t/font_r5u29ls31bgldi"; 

// LINK 
@link-color    : #108ee9; 
@link-hover-color  : tint(@link-color, 20%); 
@link-active-color  : shade(@link-color, 5%); 
@link-hover-decoration : none; 

// Animation 
@ease-out   : cubic-bezier(0.215, 0.61, 0.355, 1); 
@ease-in    : cubic-bezier(0.55, 0.055, 0.675, 0.19); 
@ease-in-out   : cubic-bezier(0.645, 0.045, 0.355, 1); 
@ease-out-back  : cubic-bezier(0.12, 0.4, 0.29, 1.46); 
@ease-in-back  : cubic-bezier(0.71, -0.46, 0.88, 0.6); 
@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); 
@ease-out-circ  : cubic-bezier(0.08, 0.82, 0.17, 1); 
@ease-in-circ  : cubic-bezier(0.6, 0.04, 0.98, 0.34); 
@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); 
@ease-out-quint  : cubic-bezier(0.23, 1, 0.32, 1); 
@ease-in-quint  : cubic-bezier(0.755, 0.05, 0.855, 0.06); 
@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); 

// Border color 
@border-color-base  : #d9d9d9;  // base border outline a component 
@border-color-split  : #e9e9e9;  // split border inside a component 

// Outline 
@outline-blur-size  : 0; 
@outline-width   : 2px; 
@outline-color   : @primary-color; 

// Background color 
@background-color-base : #f7f7f7;  // basic gray background 

// Shadow 
@shadow-color   : rgba(0, 0, 0, .2); 
@box-shadow-base  : @shadow-1-down; 
@shadow-1-up   : 0 -1px 6px @shadow-color; 
@shadow-1-down   : 0 1px 6px @shadow-color; 
@shadow-1-left   : -1px 0 6px @shadow-color; 
@shadow-1-right   : 1px 0 6px @shadow-color; 
@shadow-2    : 0 2px 8px @shadow-color; 

// Buttons 
@btn-font-weight  : 500; 
@btn-border-radius-base : @border-radius-base; 
@btn-border-radius-sm : @border-radius-sm; 

@btn-primary-color  : #fff; 
@btn-primary-bg   : @primary-color; 
@btn-group-border  : shade(@primary-color, 5%); 

@btn-default-color  : @text-color; 
@btn-default-bg   : @background-color-base; 
@btn-default-border  : @border-color-base; 

@btn-ghost-color  : @text-color; 
@btn-ghost-bg   : transparent; 
@btn-ghost-border  : @border-color-base; 

@btn-disable-color  : #ccc; 
@btn-disable-bg   : @background-color-base; 
@btn-disable-border  : @border-color-base; 

@btn-padding-base  : 4px 15px; 
@btn-font-size-lg  : @font-size-lg; 
@btn-padding-lg   : 4px 15px 5px 15px; 
@btn-padding-sm   : 1px 7px; 

@btn-circle-size  : 28px; 
@btn-circle-size-lg  : 32px; 
@btn-circle-size-sm  : 22px; 

// Media queries breakpoints 
// Extra small screen/phone 
@screen-xs    : 480px; 
@screen-xs-min   : @screen-xs; 
@screen-xs-max   : (@screen-xs-min - 1); 

// Small screen/tablet 
@screen-sm    : 768px; 
@screen-sm-min   : @screen-sm; 
@screen-sm-max   : (@screen-sm-min - 1); 

// Medium screen/desktop 
@screen-md    : 992px; 
@screen-md-min   : @screen-md; 
@screen-md-max   : (@screen-md-min - 1); 

// Large screen/wide desktop 
@screen-lg    : 1200px; 
@screen-lg-min   : @screen-lg; 
@screen-lg-max   : (@screen-lg-min - 1); 

// Grid system 
@grid-columns   : 24; 
@grid-gutter-width  : 0; 

// Layout 
@layout-body-background : #ececec; 
@layout-header-background : @heading-color; 
@layout-header-height  : 64px; 
@layout-header-padding  : 0 50px; 
@layout-footer-padding  : 24px 50px; 
@layout-sider-background : @heading-color; 
@layout-content-margin  : 24px; 
@layout-trigger-height  : 48px; 

// z-index list 
@zindex-affix   : 10; 
@zindex-back-top  : 10; 
@zindex-modal-mask  : 1000; 
@zindex-modal   : 1000; 
@zindex-notification : 1010; 
@zindex-message   : 1010; 
@zindex-popover   : 1030; 
@zindex-picker   : 1050; 
@zindex-dropdown  : 1050; 
@zindex-tooltip   : 1060; 

// Animation 
@animation-duration-slow: .3s; // Modal 
@animation-duration-base: .2s; 
@animation-duration-fast: .1s; // Tooltip 

// Form 
// --- 
@label-required-color  : @highlight-color; 
@label-color     : @text-color; 
@form-item-margin-bottom  : 24px; 

// Input 
// --- 
@input-height-base   : 28px; 
@input-height-lg    : 32px; 
@input-height-sm    : 22px; 
@input-padding-horizontal : 7px; 
@input-padding-vertical-base : 4px; 
@input-padding-vertical-sm : 1px; 
@input-padding-vertical-lg : 6px; 
@input-placeholder-color  : #ccc; 
@input-color     : @text-color; 
@input-border-color   : @border-color-base; 
@input-bg     : #fff; 
@input-hover-border-color : @primary-color; 
@input-disabled-bg   : @background-color-base; 

// Tooltip 
// --- 
//* Tooltip max width 
@tooltip-max-width: 250px; 
//** Tooltip text color 
@tooltip-color: #fff; 
//** Tooltip background color 
@tooltip-bg: rgba(64, 64, 64, .85); 
//** Tooltip arrow width 
@tooltip-arrow-width: 5px; 
//** Tooltip distance with trigger 
@tooltip-distance: @tooltip-arrow-width - 1 + 4; 
//** Tooltip arrow color 
@tooltip-arrow-color: @tooltip-bg; 



// Popover 
// --- 
//** Popover body background color 
@popover-bg: #fff; 
//** Popover maximum width 
@popover-min-width: 177px; 
//** Popover arrow width 
@popover-arrow-width: 4px; 
//** Popover arrow color 
@popover-arrow-color: @popover-bg; 
//** Popover outer arrow width 
@popover-arrow-outer-width: (@popover-arrow-width + 1); 
//** Popover outer arrow color 
@popover-arrow-outer-color: fadeout(@border-color-base, 30%); 

// Progress 
// -- 
@process-default-color: @primary-color; 





// CUSTOM STYLES 
// ===================== 

h1, h2, h3 { 
    font-family: 'Bariol_Bold'; 
    -webkit-font-smoothing: antialiased; 
    -webkit-margin-after: 0px; 
    -webkit-margin-before: 10px; 
    -webkit-margin-end: 0px; 
    -webkit-margin-start: 0px; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 



p { 
    font-family: 'Bariol_Bold'; 
    -webkit-font-smoothing: antialiased; 
    -webkit-margin-after: 10px; 
    -webkit-margin-before: 5px; 
    -webkit-margin-end: 0px; 
    -webkit-margin-start: 0px; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 


.ant-menu-item { 
    font-weight: 500; 
    -webkit-font-smoothing: antialiased; 
    font-size: 14px; 
} 



.landing-menu { 
    .ant-menu-item { 
     color: #f1beba; 
    } 

    li.ant-menu-item-selected { 
     color: #fff; 
     border-bottom: 2px solid #fff; 
    } 
} 

.ant-timeline-item-head-custom { 
    background: #fafafa !important; 
} 

.ant-timeline-item-head { 
    background: #fafafa !important; 
} 


ul.ant-menu-horizontal { 
    border-bottom: none; 
} 


#search-box { 
    height: 45px !important;  
    border-radius: 5px !important; 
    border-bottom-right-radius: 0px !important; 
    border-top-right-radius: 0px !important; 
    border: none !important; 
    padding-right: 35px !important; 
    &:focus { 
     outline: 0 
    } 

} 

#search-box-results { 
    #search-box; 
    border: 2px solid #efefef !important; 
} 

.ant-input:focus { 
    border-color: none !important; 
    outline: 0 !important; 
    box-shadow: none !important; 
} 

.rc-progress-circle-path { 
    stroke: @primary-color !important; 
} 


.ant-menu-item { 
    font-family: 'Bariol_Bold'; 
} 







.cant-find-form { 
    input { 
     height: 50px !important; 
     border-radius: 3px !important; 
     border: 2px solid #efefef !important; 
     &:focus { 
      outline: 0 
     } 
    } 
} 

#app-navigation { 
    .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover { 
     border-bottom: 2px solid transparent !important; 
     color: @primary-color !important; 
    } 
} 

.ant-btn { 
    font-family: 'Bariol_Bold'; 
} 

.vendor-title { 
    font-family: 'Bariol_Light'; 
    margin-top: 20px; 
    font-size: 28px; 
} 

a { 
    text-decoration: none; 
} 

#react-root { 
    minHeight: 100vh; 
} 

html, body { 
    //background: #FAFAFA !important; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

body { 
    overflow-x: hidden; 
}