Accueil Explorer Aide
S'inscrire Connexion
wicresoft
/
doc_project
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Aborescence: 9f08b5b43f
Branches Tags
doc_project
/
3x.antv.design
/
assets
/
customize-theme.zh-CN.db1f7227.js

customize-theme.zh-CN.db1f7227.js 54 KB
Historique Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439 
  1. import{_ as s,a,q as e,k as p}from"./index.3fe853a6.js";const t={pageData:{title:"\u5B9A\u5236\u4E3B\u9898",description:"",frontmatter:{},headers:[{level:2,title:"Ant Design Vue \u7684\u6837\u5F0F\u53D8\u91CF",slug:"Ant-Design-Vue-\u7684\u6837\u5F0F\u53D8\u91CF",content:"antd \u7684\u6837\u5F0F\u4F7F\u7528\u4E86 [Less](http://lesscss.org/) \u4F5C\u4E3A\u5F00\u53D1\u8BED\u8A00\uFF0C\u5E76\u5B9A\u4E49\u4E86\u4E00\u7CFB\u5217\u5168\u5C40/\u7EC4\u4EF6\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u6839\u636E\u9700\u6C42\u8FDB\u884C\u76F8\u5E94\u8C03\u6574\u3002"},{level:2,title:"\u5B9A\u5236\u65B9\u5F0F",slug:"\u5B9A\u5236\u65B9\u5F0F",content:"\u6211\u4EEC\u4F7F\u7528 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) \u7684\u65B9\u5F0F\u6765\u8FDB\u884C\u8986\u76D6\u53D8\u91CF\u3002\u4E0B\u9762\u5C06\u9488\u5BF9\u4E0D\u540C\u7684\u573A\u666F\u63D0\u4F9B\u4E00\u4E9B\u5E38\u7528\u7684\u5B9A\u5236\u65B9\u5F0F\u3002"},{level:3,title:"\u5728 webpack \u4E2D\u5B9A\u5236\u4E3B\u9898",slug:"\u5728-webpack-\u4E2D\u5B9A\u5236\u4E3B\u9898",content:"\u6211\u4EEC\u4EE5 webpack@4 \u4E3A\u4F8B\u8FDB\u884C\u8BF4\u660E\uFF0C\u4EE5\u4E0B\u662F\u4E00\u4E2A `webpack.config.js` \u7684\u5178\u578B\u4F8B\u5B50\uFF0C\u5BF9 [less-loader](https://github.com/webpack-contrib/less-loader) \u7684 options \u5C5E\u6027\u8FDB\u884C\u76F8\u5E94\u914D\u7F6E\u3002"},{level:3,title:"\u5728 vue cli 2 \u4E2D\u5B9A\u5236\u4E3B\u9898",slug:"\u5728-vue-cli-2-\u4E2D\u5B9A\u5236\u4E3B\u9898",content:"\u4FEE\u6539`build/utils.js`\u6587\u4EF6"},{level:3,title:"\u5728 vue cli 3 \u4E2D\u5B9A\u5236\u4E3B\u9898",slug:"\u5728-vue-cli-3-\u4E2D\u5B9A\u5236\u4E3B\u9898",content:"\u9879\u76EE\u6839\u76EE\u5F55\u4E0B\u65B0\u5EFA\u6587\u4EF6`vue.config.js`"},{level:3,title:"\u914D\u7F6E less \u53D8\u91CF\u6587\u4EF6",slug:"\u914D\u7F6E-less-\u53D8\u91CF\u6587\u4EF6",content:"\u53E6\u5916\u4E00\u79CD\u65B9\u5F0F\u662F\u5EFA\u7ACB\u4E00\u4E2A\u5355\u72EC\u7684 `less` \u53D8\u91CF\u6587\u4EF6\uFF0C\u5F15\u5165\u8FD9\u4E2A\u6587\u4EF6\u8986\u76D6 `antd.less` \u91CC\u7684\u53D8\u91CF\u3002"},{level:3,title:"\u52A8\u6001\u4E3B\u9898\u8272",slug:"\u52A8\u6001\u4E3B\u9898\u8272",content:"\u5728\u8FD0\u884C\u65F6\u8C03\u6574\u4E3B\u9898\u8272\u8BF7[\u53C2\u8003\u6B64\u5904](/docs/vue/customize-theme-variable)\u3002"},{level:2,title:"\u6CA1\u6709\u751F\u6548\uFF1F",slug:"\u6CA1\u6709\u751F\u6548\uFF1F",content:"\u6CE8\u610F\u6837\u5F0F\u5FC5\u987B\u52A0\u8F7D less \u683C\u5F0F\uFF0C\u4E00\u4E2A\u5E38\u89C1\u7684\u95EE\u9898\u5C31\u662F\u5F15\u5165\u4E86\u591A\u4EFD\u6837\u5F0F\uFF0Cless \u7684\u6837\u5F0F\u88AB css \u7684\u6837\u5F0F\u8986\u76D6\u4E86\u3002"},{level:2,title:"\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898",slug:"\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898",content:"\u65B9\u5F0F\u4E00\uFF1A\u5728\u6837\u5F0F\u6587\u4EF6\u5168\u91CF\u5F15\u5165 [antd.dark.less](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less)\u3002"},{level:2,title:"\u793E\u533A\u6559\u7A0B for Antd React",slug:"\u793E\u533A\u6559\u7A0B-for-Antd-React",content:""}],relativePath:"site/src/vueDocs/customize-theme.zh-CN.md",content:`# \u5B9A\u5236\u4E3B\u9898
    2. 

  2. 

  3. ant-design-vue \u7684\u7EC4\u4EF6\u7ED3\u6784\u53CA\u6837\u5F0F\u548C Antd React \u5B8C\u5168\u4E00\u81F4\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003 Antd React \u7684\u5B9A\u5236\u65B9\u5F0F\u8FDB\u884C\u914D\u7F6E\u3002
    4. 

  4. 

  5. Ant Design \u8BBE\u8BA1\u89C4\u8303\u4E0A\u652F\u6301\u4E00\u5B9A\u7A0B\u5EA6\u7684\u6837\u5F0F\u5B9A\u5236\uFF0C\u4EE5\u6EE1\u8DB3\u4E1A\u52A1\u548C\u54C1\u724C\u4E0A\u591A\u6837\u5316\u7684\u89C6\u89C9\u9700\u6C42\uFF0C\u5305\u62EC\u4F46\u4E0D\u9650\u4E8E\u4E3B\u8272\u3001\u5706\u89D2\u3001\u8FB9\u6846\u548C\u90E8\u5206\u7EC4\u4EF6\u7684\u89C6\u89C9\u5B9A\u5236\u3002
    6. 

  6. 

  7. ![](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
    8. 

  8. 

  9. ## Ant Design Vue \u7684\u6837\u5F0F\u53D8\u91CF
    10. 

  10. 

  11. antd \u7684\u6837\u5F0F\u4F7F\u7528\u4E86 [Less](http://lesscss.org/) \u4F5C\u4E3A\u5F00\u53D1\u8BED\u8A00\uFF0C\u5E76\u5B9A\u4E49\u4E86\u4E00\u7CFB\u5217\u5168\u5C40/\u7EC4\u4EF6\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u6839\u636E\u9700\u6C42\u8FDB\u884C\u76F8\u5E94\u8C03\u6574\u3002
    12. 

  12. 

  13. \u4EE5\u4E0B\u662F\u4E00\u4E9B\u6700\u5E38\u7528\u7684\u901A\u7528\u53D8\u91CF\uFF0C\u6240\u6709\u6837\u5F0F\u53D8\u91CF\u53EF\u4EE5\u5728 [\u8FD9\u91CC](https://github.com/vueComponent/ant-design-vue/blob/main/components/style/themes/default.less) \u627E\u5230\u3002
    14. 

  14. 

  15. \`\`\`less
    16. 

  16. @primary-color: #1890ff; // \u5168\u5C40\u4E3B\u8272
    17. 

  17. @link-color: #1890ff; // \u94FE\u63A5\u8272
    18. 

  18. @success-color: #52c41a; // \u6210\u529F\u8272
    19. 

  19. @warning-color: #faad14; // \u8B66\u544A\u8272
    20. 

  20. @error-color: #f5222d; // \u9519\u8BEF\u8272
    21. 

  21. @font-size-base: 14px; // \u4E3B\u5B57\u53F7
    22. 

  22. @heading-color: rgba(0, 0, 0, 0.85); // \u6807\u9898\u8272
    23. 

  23. @text-color: rgba(0, 0, 0, 0.65); // \u4E3B\u6587\u672C\u8272
    24. 

  24. @text-color-secondary: rgba(0, 0, 0, 0.45); // \u6B21\u6587\u672C\u8272
    25. 

  25. @disabled-color: rgba(0, 0, 0, 0.25); // \u5931\u6548\u8272
    26. 

  26. @border-radius-base: 2px; // \u7EC4\u4EF6/\u6D6E\u5C42\u5706\u89D2
    27. 

  27. @border-color-base: #d9d9d9; // \u8FB9\u6846\u8272
    28. 

  28. @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // \u6D6E\u5C42\u9634\u5F71
    29. 

  29. \`\`\`
    30. 

  30. 

  31. \u5982\u679C\u4EE5\u4E0A\u53D8\u91CF\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u5B9A\u5236\u9700\u6C42\uFF0C\u53EF\u4EE5\u7ED9\u6211\u4EEC\u63D0 issue\u3002
    32. 

  32. 

  33. ## \u5B9A\u5236\u65B9\u5F0F
    34. 

  34. 

  35. \u6211\u4EEC\u4F7F\u7528 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) \u7684\u65B9\u5F0F\u6765\u8FDB\u884C\u8986\u76D6\u53D8\u91CF\u3002\u4E0B\u9762\u5C06\u9488\u5BF9\u4E0D\u540C\u7684\u573A\u666F\u63D0\u4F9B\u4E00\u4E9B\u5E38\u7528\u7684\u5B9A\u5236\u65B9\u5F0F\u3002
    36. 

  36. 

  37. ### \u5728 webpack \u4E2D\u5B9A\u5236\u4E3B\u9898
    38. 

  38. 

  39. \u6211\u4EEC\u4EE5 webpack@4 \u4E3A\u4F8B\u8FDB\u884C\u8BF4\u660E\uFF0C\u4EE5\u4E0B\u662F\u4E00\u4E2A \`webpack.config.js\` \u7684\u5178\u578B\u4F8B\u5B50\uFF0C\u5BF9 [less-loader](https://github.com/webpack-contrib/less-loader) \u7684 options \u5C5E\u6027\u8FDB\u884C\u76F8\u5E94\u914D\u7F6E\u3002
    40. 

  40. 

  41. \`\`\`diff
    42. 

  42. // webpack.config.js
    43. 

  43. module.exports = {
    44. 

  44.   rules: [{
    45. 

  45.     test: /\\.less$/,
    46. 

  46.     use: [{
    47. 

  47.       loader: 'style-loader',
    48. 

  48.     }, {
    49. 

  49.       loader: 'css-loader', // translates CSS into CommonJS
    50. 

  50.     }, {
    51. 

  51.       loader: 'less-loader', // compiles Less to CSS
    52. 

  52. +     options: {
    53. 

  53. +       lessOptions: {
    54. 

  54. +         modifyVars: {
    55. 

  55. +           'primary-color': '#1DA57A',
    56. 

  56. +           'link-color': '#1DA57A',
    57. 

  57. +           'border-radius-base': '2px',
    58. 

  58. +         },
    59. 

  59. +         javascriptEnabled: true,
    60. 

  60. +       }
    61. 

  61. +     },
    62. 

  62.     }],
    63. 

  63.     // ...other rules
    64. 

  64.   }],
    65. 

  65.   // ...other config
    66. 

  66. }
    67. 

  67. \`\`\`
    68. 

  68. 

  69. \u6CE8\u610F less-loader \u7684\u5904\u7406\u8303\u56F4\u4E0D\u8981\u8FC7\u6EE4\u6389 \`node_modules\` \u4E0B\u7684 antd \u5305\u3002
    70. 

  70. 

  71. ### \u5728 vue cli 2 \u4E2D\u5B9A\u5236\u4E3B\u9898
    72. 

  72. 

  73. \u4FEE\u6539\`build/utils.js\`\u6587\u4EF6
    74. 

  74. 

  75. \`\`\`diff
    76. 

  76. // build/utils.js
    77. 

  77. - less: generateLoaders('less'),
    78. 

  78. + less: generateLoaders('less', {
    79. 

  79. +   modifyVars: {
    80. 

  80. +     'primary-color': '#1DA57A',
    81. 

  81. +     'link-color': '#1DA57A',
    82. 

  82. +     'border-radius-base': '2px',
    83. 

  83. +   },
    84. 

  84. +   javascriptEnabled: true,
    85. 

  85. + }),
    86. 

  86. 

  87. \`\`\`
    88. 

  88. 

  89. ### \u5728 vue cli 3 \u4E2D\u5B9A\u5236\u4E3B\u9898
    90. 

  90. 

  91. \u9879\u76EE\u6839\u76EE\u5F55\u4E0B\u65B0\u5EFA\u6587\u4EF6\`vue.config.js\`
    92. 

  92. 

  93. \`\`\`js
    94. 

  94. // vue.config.js for less-loader@6.0.0
    95. 

  95. module.exports = {
    96. 

  96.   css: {
    97. 

  97.     loaderOptions: {
    98. 

  98.       less: {
    99. 

  99.         lessOptions: {
    100. 

  100.           modifyVars: {
    101. 

  101.             'primary-color': '#1DA57A',
    102. 

  102.             'link-color': '#1DA57A',
    103. 

  103.             'border-radius-base': '2px',
    104. 

  104.           },
    105. 

  105.           javascriptEnabled: true,
    106. 

  106.         },
    107. 

  107.       },
    108. 

  108.     },
    109. 

  109.   },
    110. 

  110. };
    111. 

  111. \`\`\`
    112. 

  112. 

  113. ### \u914D\u7F6E less \u53D8\u91CF\u6587\u4EF6
    114. 

  114. 

  115. \u53E6\u5916\u4E00\u79CD\u65B9\u5F0F\u662F\u5EFA\u7ACB\u4E00\u4E2A\u5355\u72EC\u7684 \`less\` \u53D8\u91CF\u6587\u4EF6\uFF0C\u5F15\u5165\u8FD9\u4E2A\u6587\u4EF6\u8986\u76D6 \`antd.less\` \u91CC\u7684\u53D8\u91CF\u3002
    116. 

  116. 

  117. \`\`\`css
    118. 

  118. @import '~ant-design-vue/dist/antd.less'; // \u5F15\u5165\u5B98\u65B9\u63D0\u4F9B\u7684 less \u6837\u5F0F\u5165\u53E3\u6587\u4EF6
    119. 

  119. @import 'your-theme-file.less'; // \u7528\u4E8E\u8986\u76D6\u4E0A\u9762\u5B9A\u4E49\u7684\u53D8\u91CF
    120. 

  120. \`\`\`
    121. 

  121. 

  122. \u6CE8\u610F\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u5DF2\u7ECF\u8F7D\u5165\u4E86\u6240\u6709\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u4E0D\u9700\u8981\u4E5F\u65E0\u6CD5\u548C\u6309\u9700\u52A0\u8F7D\u63D2\u4EF6 \`babel-plugin-import\` \u7684 \`style\` \u5C5E\u6027\u4E00\u8D77\u4F7F\u7528\u3002
    123. 

  123. 

  124. ### \u52A8\u6001\u4E3B\u9898\u8272
    125. 

  125. 

  126. \u5728\u8FD0\u884C\u65F6\u8C03\u6574\u4E3B\u9898\u8272\u8BF7[\u53C2\u8003\u6B64\u5904](/docs/vue/customize-theme-variable)\u3002
    127. 

  127. 

  128. ## \u6CA1\u6709\u751F\u6548\uFF1F
    129. 

  129. 

  130. \u6CE8\u610F\u6837\u5F0F\u5FC5\u987B\u52A0\u8F7D less \u683C\u5F0F\uFF0C\u4E00\u4E2A\u5E38\u89C1\u7684\u95EE\u9898\u5C31\u662F\u5F15\u5165\u4E86\u591A\u4EFD\u6837\u5F0F\uFF0Cless \u7684\u6837\u5F0F\u88AB css \u7684\u6837\u5F0F\u8986\u76D6\u4E86\u3002
    131. 

  131. 

  132. - \u5982\u679C\u4F60\u5728\u4F7F\u7528 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) \u7684 \`style\` \u914D\u7F6E\u6765\u5F15\u5165\u6837\u5F0F\uFF0C\u9700\u8981\u5C06\u914D\u7F6E\u503C\u4ECE \`'css'\` \u6539\u4E3A \`true\`\uFF0C\u8FD9\u6837\u4F1A\u5F15\u5165 less \u6587\u4EF6\u3002
    133. 

  133. - \u5982\u679C\u4F60\u662F\u901A\u8FC7 \`'ant-design-vue/dist/antd.css'\` \u5F15\u5165\u6837\u5F0F\u7684\uFF0C\u6539\u4E3A \`ant-design-vue/dist/antd.less\`\u3002
    134. 

  134. 

  135. ## \u4F7F\u7528\u6697\u9ED1\u4E3B\u9898
    136. 

  136. 

  137. \u65B9\u5F0F\u4E00\uFF1A\u5728\u6837\u5F0F\u6587\u4EF6\u5168\u91CF\u5F15\u5165 [antd.dark.less](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less)\u3002
    138. 

  138. 

  139. \`\`\`less
    140. 

  140. @import '~ant-design-vue/dist/antd.dark.less'; // \u5F15\u5165\u5B98\u65B9\u63D0\u4F9B\u7684\u6697\u8272 less \u6837\u5F0F\u5165\u53E3\u6587\u4EF6
    141. 

  141. \`\`\`
    142. 

  142. 

  143. \u5982\u679C\u9879\u76EE\u4E0D\u4F7F\u7528 Less\uFF0C\u53EF\u5728 CSS \u6587\u4EF6\u4E2D\u5168\u91CF\u5F15\u5165 [antd.dark.css](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.css)\u3002
    144. 

  144. 

  145. \`\`\`css
    146. 

  146. @import '~ant-design-vue/dist/antd.dark.css';
    147. 

  147. \`\`\`
    148. 

  148. 

  149. > \u6CE8\u610F\u8FD9\u79CD\u65B9\u5F0F\u4E0B\u4F60\u4E0D\u9700\u8981\u518D\u5F15\u5165 \`ant-design-vue/dist/antd.less\` \u6216 \`ant-design-vue/dist/antd.css\` \u4E86\uFF0C\u53EF\u4EE5\u5B89\u5168\u79FB\u9664\u6389\u3002\u4E5F\u4E0D\u9700\u8981\u5F00\u542F babel-plugin-import \u7684 \`style\` \u914D\u7F6E\u3002\u901A\u8FC7\u6B64\u65B9\u5F0F\u4E0D\u80FD\u540C\u65F6\u914D\u7F6E\u4E24\u79CD\u53CA\u4EE5\u4E0A\u4E3B\u9898\u3002
    150. 

  150. 

  151. \u65B9\u5F0F\u4E8C\uFF1A\u662F\u7528\u5728 \`webpack.config.js\` \u4F7F\u7528 [less-loader](https://github.com/webpack-contrib/less-loader) \u6309\u9700\u5F15\u5165\uFF1A
    152. 

  152. 

  153. \`\`\`diff
    154. 

  154. const { getThemeVariables } = require('ant-design-vue/dist/theme');
    155. 

  155. 

  156. // webpack.config.js
    157. 

  157. module.exports = {
    158. 

  158.   rules: [{
    159. 

  159.     test: /\\.less$/,
    160. 

  160.     use: [{
    161. 

  161.       loader: 'style-loader',
    162. 

  162.     }, {
    163. 

  163.       loader: 'css-loader', // translates CSS into CommonJS
    164. 

  164.     }, {
    165. 

  165.       loader: 'less-loader', // compiles Less to CSS
    166. 

  166. +     options: {
    167. 

  167. +       lessOptions: { // \u5982\u679C\u4F7F\u7528less-loader@5\uFF0C\u8BF7\u79FB\u9664 lessOptions \u8FD9\u4E00\u7EA7\u76F4\u63A5\u914D\u7F6E\u9009\u9879\u3002
    168. 

  168. +         modifyVars: getThemeVariables({
    169. 

  169. +           dark: true, // \u5F00\u542F\u6697\u9ED1\u6A21\u5F0F
    170. 

  170. +         }),
    171. 

  171. +         javascriptEnabled: true,
    172. 

  172. +       },
    173. 

  173. +     },
    174. 

  174.     }],
    175. 

  175.   }],
    176. 

  176. };
    177. 

  177. \`\`\`
    178. 

  178. 

  179. ## \u793E\u533A\u6559\u7A0B for Antd React
    180. 

  180. 

  181. - [How to Customize Ant Design with React & Webpack\u2026 the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
    182. 

  182. - [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
    183. 

  183. `,html:`<h1 id="\u5B9A\u5236\u4E3B\u9898">\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5B9A\u5236\u4E3B\u9898">
    184. 

  184.           <span aria-hidden="true" class="anchor">#</span>
    185. 

  185.         </a></h1>
    186. 

  186. <p>ant-design-vue \u7684\u7EC4\u4EF6\u7ED3\u6784\u53CA\u6837\u5F0F\u548C Antd React \u5B8C\u5168\u4E00\u81F4\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003 Antd React \u7684\u5B9A\u5236\u65B9\u5F0F\u8FDB\u884C\u914D\u7F6E\u3002</p>
    187. 

  187. <p>Ant Design \u8BBE\u8BA1\u89C4\u8303\u4E0A\u652F\u6301\u4E00\u5B9A\u7A0B\u5EA6\u7684\u6837\u5F0F\u5B9A\u5236\uFF0C\u4EE5\u6EE1\u8DB3\u4E1A\u52A1\u548C\u54C1\u724C\u4E0A\u591A\u6837\u5316\u7684\u89C6\u89C9\u9700\u6C42\uFF0C\u5305\u62EC\u4F46\u4E0D\u9650\u4E8E\u4E3B\u8272\u3001\u5706\u89D2\u3001\u8FB9\u6846\u548C\u90E8\u5206\u7EC4\u4EF6\u7684\u89C6\u89C9\u5B9A\u5236\u3002</p>
    188. 

  188. <p><img src="https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png" alt=""></p>
    189. 

  189. <h2 id="Ant-Design-Vue-\u7684\u6837\u5F0F\u53D8\u91CF">Ant Design Vue \u7684\u6837\u5F0F\u53D8\u91CF <a class="header-anchor" href="#Ant-Design-Vue-\u7684\u6837\u5F0F\u53D8\u91CF">
    190. 

  190.           <span aria-hidden="true" class="anchor">#</span>
    191. 

  191.         </a></h2>
    192. 

  192. <p>antd \u7684\u6837\u5F0F\u4F7F\u7528\u4E86 <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a> \u4F5C\u4E3A\u5F00\u53D1\u8BED\u8A00\uFF0C\u5E76\u5B9A\u4E49\u4E86\u4E00\u7CFB\u5217\u5168\u5C40/\u7EC4\u4EF6\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u6839\u636E\u9700\u6C42\u8FDB\u884C\u76F8\u5E94\u8C03\u6574\u3002</p>
    193. 

  193. <p>\u4EE5\u4E0B\u662F\u4E00\u4E9B\u6700\u5E38\u7528\u7684\u901A\u7528\u53D8\u91CF\uFF0C\u6240\u6709\u6837\u5F0F\u53D8\u91CF\u53EF\u4EE5\u5728 <a href="https://github.com/vueComponent/ant-design-vue/blob/main/components/style/themes/default.less" target="_blank" rel="noopener noreferrer">\u8FD9\u91CC</a> \u627E\u5230\u3002</p>
    194. 

  194. <pre class="language-less" v-pre><code><span class="token variable">@primary-color<span class="token punctuation">:</span></span> #1890ff<span class="token punctuation">;</span> <span class="token comment">// \u5168\u5C40\u4E3B\u8272</span>
    195. 

  195. <span class="token variable">@link-color<span class="token punctuation">:</span></span> #1890ff<span class="token punctuation">;</span> <span class="token comment">// \u94FE\u63A5\u8272</span>
    196. 

  196. <span class="token variable">@success-color<span class="token punctuation">:</span></span> #52c41a<span class="token punctuation">;</span> <span class="token comment">// \u6210\u529F\u8272</span>
    197. 

  197. <span class="token variable">@warning-color<span class="token punctuation">:</span></span> #faad14<span class="token punctuation">;</span> <span class="token comment">// \u8B66\u544A\u8272</span>
    198. 

  198. <span class="token variable">@error-color<span class="token punctuation">:</span></span> #f5222d<span class="token punctuation">;</span> <span class="token comment">// \u9519\u8BEF\u8272</span>
    199. 

  199. <span class="token variable">@font-size-base<span class="token punctuation">:</span></span> 14px<span class="token punctuation">;</span> <span class="token comment">// \u4E3B\u5B57\u53F7</span>
    200. 

  200. <span class="token variable">@heading-color<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.85<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u6807\u9898\u8272</span>
    201. 

  201. <span class="token variable">@text-color<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.65<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u4E3B\u6587\u672C\u8272</span>
    202. 

  202. <span class="token variable">@text-color-secondary<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.45<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u6B21\u6587\u672C\u8272</span>
    203. 

  203. <span class="token variable">@disabled-color<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.25<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u5931\u6548\u8272</span>
    204. 

  204. <span class="token variable">@border-radius-base<span class="token punctuation">:</span></span> 2px<span class="token punctuation">;</span> <span class="token comment">// \u7EC4\u4EF6/\u6D6E\u5C42\u5706\u89D2</span>
    205. 

  205. <span class="token variable">@border-color-base<span class="token punctuation">:</span></span> #d9d9d9<span class="token punctuation">;</span> <span class="token comment">// \u8FB9\u6846\u8272</span>
    206. 

  206. <span class="token variable">@box-shadow-base<span class="token punctuation">:</span></span> 0 2px 8px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.15<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u6D6E\u5C42\u9634\u5F71</span>
    207. 

  207. </code></pre>
    208. 

  208. <p>\u5982\u679C\u4EE5\u4E0A\u53D8\u91CF\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u5B9A\u5236\u9700\u6C42\uFF0C\u53EF\u4EE5\u7ED9\u6211\u4EEC\u63D0 issue\u3002</p>
    209. 

  209. <h2 id="\u5B9A\u5236\u65B9\u5F0F">\u5B9A\u5236\u65B9\u5F0F <a class="header-anchor" href="#\u5B9A\u5236\u65B9\u5F0F">
    210. 

  210.           <span aria-hidden="true" class="anchor">#</span>
    211. 

  211.         </a></h2>
    212. 

  212. <p>\u6211\u4EEC\u4F7F\u7528 <a href="http://lesscss.org/usage/#using-less-in-the-browser-modify-variables" target="_blank" rel="noopener noreferrer">modifyVars</a> \u7684\u65B9\u5F0F\u6765\u8FDB\u884C\u8986\u76D6\u53D8\u91CF\u3002\u4E0B\u9762\u5C06\u9488\u5BF9\u4E0D\u540C\u7684\u573A\u666F\u63D0\u4F9B\u4E00\u4E9B\u5E38\u7528\u7684\u5B9A\u5236\u65B9\u5F0F\u3002</p>
    213. 

  213. <h3 id="\u5728-webpack-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 webpack \u4E2D\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5728-webpack-\u4E2D\u5B9A\u5236\u4E3B\u9898">
    214. 

  214.           <span aria-hidden="true" class="anchor">#</span>
    215. 

  215.         </a></h3>
    216. 

  216. <p>\u6211\u4EEC\u4EE5 webpack@4 \u4E3A\u4F8B\u8FDB\u884C\u8BF4\u660E\uFF0C\u4EE5\u4E0B\u662F\u4E00\u4E2A <code>webpack.config.js</code> \u7684\u5178\u578B\u4F8B\u5B50\uFF0C\u5BF9 <a href="https://github.com/webpack-contrib/less-loader" target="_blank" rel="noopener noreferrer">less-loader</a> \u7684 options \u5C5E\u6027\u8FDB\u884C\u76F8\u5E94\u914D\u7F6E\u3002</p>
    217. 

  217. <pre class="language-diff" v-pre><code>// webpack.config.js
    218. 

  218. module.exports = {
    219. 

  219. <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
    220. 

  220. </span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
    221. 

  221. </span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
    222. 

  222. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'style-loader',
    223. 

  223. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    224. 

  224. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'css-loader', // translates CSS into CommonJS
    225. 

  225. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    226. 

  226. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'less-loader', // compiles Less to CSS
    227. 

  227. </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
    228. 

  228. </span><span class="token prefix inserted">+</span><span class="token line">       lessOptions: {
    229. 

  229. </span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: {
    230. 

  230. </span><span class="token prefix inserted">+</span><span class="token line">           'primary-color': '#1DA57A',
    231. 

  231. </span><span class="token prefix inserted">+</span><span class="token line">           'link-color': '#1DA57A',
    232. 

  232. </span><span class="token prefix inserted">+</span><span class="token line">           'border-radius-base': '2px',
    233. 

  233. </span><span class="token prefix inserted">+</span><span class="token line">         },
    234. 

  234. </span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
    235. 

  235. </span><span class="token prefix inserted">+</span><span class="token line">       }
    236. 

  236. </span><span class="token prefix inserted">+</span><span class="token line">     },
    237. 

  237. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    238. 

  238. </span><span class="token prefix unchanged"> </span><span class="token line">   // ...other rules
    239. 

  239. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    240. 

  240. </span><span class="token prefix unchanged"> </span><span class="token line"> // ...other config
    241. 

  241. </span></span>}
    242. 

  242. </code></pre>
    243. 

  243. <p>\u6CE8\u610F less-loader \u7684\u5904\u7406\u8303\u56F4\u4E0D\u8981\u8FC7\u6EE4\u6389 <code>node_modules</code> \u4E0B\u7684 antd \u5305\u3002</p>
    244. 

  244. <h3 id="\u5728-vue-cli-2-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 vue cli 2 \u4E2D\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5728-vue-cli-2-\u4E2D\u5B9A\u5236\u4E3B\u9898">
    245. 

  245.           <span aria-hidden="true" class="anchor">#</span>
    246. 

  246.         </a></h3>
    247. 

  247. <p>\u4FEE\u6539<code>build/utils.js</code>\u6587\u4EF6</p>
    248. 

  248. <pre class="language-diff" v-pre><code>// build/utils.js
    249. 

  249. <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> less: generateLoaders('less'),
    250. 

  250. </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> less: generateLoaders('less', {
    251. 

  251. </span><span class="token prefix inserted">+</span><span class="token line">   modifyVars: {
    252. 

  252. </span><span class="token prefix inserted">+</span><span class="token line">     'primary-color': '#1DA57A',
    253. 

  253. </span><span class="token prefix inserted">+</span><span class="token line">     'link-color': '#1DA57A',
    254. 

  254. </span><span class="token prefix inserted">+</span><span class="token line">     'border-radius-base': '2px',
    255. 

  255. </span><span class="token prefix inserted">+</span><span class="token line">   },
    256. 

  256. </span><span class="token prefix inserted">+</span><span class="token line">   javascriptEnabled: true,
    257. 

  257. </span><span class="token prefix inserted">+</span><span class="token line"> }),
    258. 

  258. </span></span>
    259. 

  259. </code></pre>
    260. 

  260. <h3 id="\u5728-vue-cli-3-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 vue cli 3 \u4E2D\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5728-vue-cli-3-\u4E2D\u5B9A\u5236\u4E3B\u9898">
    261. 

  261.           <span aria-hidden="true" class="anchor">#</span>
    262. 

  262.         </a></h3>
    263. 

  263. <p>\u9879\u76EE\u6839\u76EE\u5F55\u4E0B\u65B0\u5EFA\u6587\u4EF6<code>vue.config.js</code></p>
    264. 

  264. <pre class="language-js" v-pre><code><span class="token comment">// vue.config.js for less-loader@6.0.0</span>
    265. 

  265. module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    266. 

  266.   <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    267. 

  267.     <span class="token literal-property property">loaderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    268. 

  268.       <span class="token literal-property property">less</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    269. 

  269.         <span class="token literal-property property">lessOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    270. 

  270.           <span class="token literal-property property">modifyVars</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    271. 

  271.             <span class="token string-property property">'primary-color'</span><span class="token operator">:</span> <span class="token string">'#1DA57A'</span><span class="token punctuation">,</span>
    272. 

  272.             <span class="token string-property property">'link-color'</span><span class="token operator">:</span> <span class="token string">'#1DA57A'</span><span class="token punctuation">,</span>
    273. 

  273.             <span class="token string-property property">'border-radius-base'</span><span class="token operator">:</span> <span class="token string">'2px'</span><span class="token punctuation">,</span>
    274. 

  274.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    275. 

  275.           <span class="token literal-property property">javascriptEnabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    276. 

  276.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    277. 

  277.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    278. 

  278.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    279. 

  279.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    280. 

  280. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    281. 

  281. </code></pre>
    282. 

  282. <h3 id="\u914D\u7F6E-less-\u53D8\u91CF\u6587\u4EF6">\u914D\u7F6E less \u53D8\u91CF\u6587\u4EF6 <a class="header-anchor" href="#\u914D\u7F6E-less-\u53D8\u91CF\u6587\u4EF6">
    283. 

  283.           <span aria-hidden="true" class="anchor">#</span>
    284. 

  284.         </a></h3>
    285. 

  285. <p>\u53E6\u5916\u4E00\u79CD\u65B9\u5F0F\u662F\u5EFA\u7ACB\u4E00\u4E2A\u5355\u72EC\u7684 <code>less</code> \u53D8\u91CF\u6587\u4EF6\uFF0C\u5F15\u5165\u8FD9\u4E2A\u6587\u4EF6\u8986\u76D6 <code>antd.less</code> \u91CC\u7684\u53D8\u91CF\u3002</p>
    286. 

  286. <pre class="language-css" v-pre><code><span class="token atrule"><span class="token rule">@import</span> <span class="token string">'~ant-design-vue/dist/antd.less'</span><span class="token punctuation">;</span></span> // \u5F15\u5165\u5B98\u65B9\u63D0\u4F9B\u7684 less \u6837\u5F0F\u5165\u53E3\u6587\u4EF6
    287. 

  287. <span class="token atrule"><span class="token rule">@import</span> <span class="token string">'your-theme-file.less'</span><span class="token punctuation">;</span></span> // \u7528\u4E8E\u8986\u76D6\u4E0A\u9762\u5B9A\u4E49\u7684\u53D8\u91CF
    288. 

  288. </code></pre>
    289. 

  289. <p>\u6CE8\u610F\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u5DF2\u7ECF\u8F7D\u5165\u4E86\u6240\u6709\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u4E0D\u9700\u8981\u4E5F\u65E0\u6CD5\u548C\u6309\u9700\u52A0\u8F7D\u63D2\u4EF6 <code>babel-plugin-import</code> \u7684 <code>style</code> \u5C5E\u6027\u4E00\u8D77\u4F7F\u7528\u3002</p>
    290. 

  290. <h3 id="\u52A8\u6001\u4E3B\u9898\u8272">\u52A8\u6001\u4E3B\u9898\u8272 <a class="header-anchor" href="#\u52A8\u6001\u4E3B\u9898\u8272">
    291. 

  291.           <span aria-hidden="true" class="anchor">#</span>
    292. 

  292.         </a></h3>
    293. 

  293. <p>\u5728\u8FD0\u884C\u65F6\u8C03\u6574\u4E3B\u9898\u8272\u8BF7<a href="/docs/vue/customize-theme-variable">\u53C2\u8003\u6B64\u5904</a>\u3002</p>
    294. 

  294. <h2 id="\u6CA1\u6709\u751F\u6548\uFF1F">\u6CA1\u6709\u751F\u6548\uFF1F <a class="header-anchor" href="#\u6CA1\u6709\u751F\u6548\uFF1F">
    295. 

  295.           <span aria-hidden="true" class="anchor">#</span>
    296. 

  296.         </a></h2>
    297. 

  297. <p>\u6CE8\u610F\u6837\u5F0F\u5FC5\u987B\u52A0\u8F7D less \u683C\u5F0F\uFF0C\u4E00\u4E2A\u5E38\u89C1\u7684\u95EE\u9898\u5C31\u662F\u5F15\u5165\u4E86\u591A\u4EFD\u6837\u5F0F\uFF0Cless \u7684\u6837\u5F0F\u88AB css \u7684\u6837\u5F0F\u8986\u76D6\u4E86\u3002</p>
    298. 

  298. <ul>
    299. 

  299. <li>\u5982\u679C\u4F60\u5728\u4F7F\u7528 <a href="https://github.com/ant-design/babel-plugin-import" target="_blank" rel="noopener noreferrer">babel-plugin-import</a> \u7684 <code>style</code> \u914D\u7F6E\u6765\u5F15\u5165\u6837\u5F0F\uFF0C\u9700\u8981\u5C06\u914D\u7F6E\u503C\u4ECE <code>'css'</code> \u6539\u4E3A <code>true</code>\uFF0C\u8FD9\u6837\u4F1A\u5F15\u5165 less \u6587\u4EF6\u3002</li>
    300. 

  300. <li>\u5982\u679C\u4F60\u662F\u901A\u8FC7 <code>'ant-design-vue/dist/antd.css'</code> \u5F15\u5165\u6837\u5F0F\u7684\uFF0C\u6539\u4E3A <code>ant-design-vue/dist/antd.less</code>\u3002</li>
    301. 

  301. </ul>
    302. 

  302. <h2 id="\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898">\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898 <a class="header-anchor" href="#\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898">
    303. 

  303.           <span aria-hidden="true" class="anchor">#</span>
    304. 

  304.         </a></h2>
    305. 

  305. <p>\u65B9\u5F0F\u4E00\uFF1A\u5728\u6837\u5F0F\u6587\u4EF6\u5168\u91CF\u5F15\u5165 <a href="https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less" target="_blank" rel="noopener noreferrer">antd.dark.less</a>\u3002</p>
    306. 

  306. <pre class="language-less" v-pre><code><span class="token variable">@import</span> <span class="token string">'~ant-design-vue/dist/antd.dark.less'</span><span class="token punctuation">;</span> <span class="token comment">// \u5F15\u5165\u5B98\u65B9\u63D0\u4F9B\u7684\u6697\u8272 less \u6837\u5F0F\u5165\u53E3\u6587\u4EF6</span>
    307. 

  307. </code></pre>
    308. 

  308. <p>\u5982\u679C\u9879\u76EE\u4E0D\u4F7F\u7528 Less\uFF0C\u53EF\u5728 CSS \u6587\u4EF6\u4E2D\u5168\u91CF\u5F15\u5165 <a href="https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.css" target="_blank" rel="noopener noreferrer">antd.dark.css</a>\u3002</p>
    309. 

  309. <pre class="language-css" v-pre><code><span class="token atrule"><span class="token rule">@import</span> <span class="token string">'~ant-design-vue/dist/antd.dark.css'</span><span class="token punctuation">;</span></span>
    310. 

  310. </code></pre>
    311. 

  311. <blockquote>
    312. 

  312. <p>\u6CE8\u610F\u8FD9\u79CD\u65B9\u5F0F\u4E0B\u4F60\u4E0D\u9700\u8981\u518D\u5F15\u5165 <code>ant-design-vue/dist/antd.less</code> \u6216 <code>ant-design-vue/dist/antd.css</code> \u4E86\uFF0C\u53EF\u4EE5\u5B89\u5168\u79FB\u9664\u6389\u3002\u4E5F\u4E0D\u9700\u8981\u5F00\u542F babel-plugin-import \u7684 <code>style</code> \u914D\u7F6E\u3002\u901A\u8FC7\u6B64\u65B9\u5F0F\u4E0D\u80FD\u540C\u65F6\u914D\u7F6E\u4E24\u79CD\u53CA\u4EE5\u4E0A\u4E3B\u9898\u3002</p>
    313. 

  313. </blockquote>
    314. 

  314. <p>\u65B9\u5F0F\u4E8C\uFF1A\u662F\u7528\u5728 <code>webpack.config.js</code> \u4F7F\u7528 <a href="https://github.com/webpack-contrib/less-loader" target="_blank" rel="noopener noreferrer">less-loader</a> \u6309\u9700\u5F15\u5165\uFF1A</p>
    315. 

  315. <pre class="language-diff" v-pre><code>const { getThemeVariables } = require('ant-design-vue/dist/theme');
    316. 

  316. 

  317. // webpack.config.js
    318. 

  318. module.exports = {
    319. 

  319. <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
    320. 

  320. </span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
    321. 

  321. </span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
    322. 

  322. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'style-loader',
    323. 

  323. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    324. 

  324. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'css-loader', // translates CSS into CommonJS
    325. 

  325. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    326. 

  326. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'less-loader', // compiles Less to CSS
    327. 

  327. </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
    328. 

  328. </span><span class="token prefix inserted">+</span><span class="token line">       lessOptions: { // \u5982\u679C\u4F7F\u7528less-loader@5\uFF0C\u8BF7\u79FB\u9664 lessOptions \u8FD9\u4E00\u7EA7\u76F4\u63A5\u914D\u7F6E\u9009\u9879\u3002
    329. 

  329. </span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: getThemeVariables({
    330. 

  330. </span><span class="token prefix inserted">+</span><span class="token line">           dark: true, // \u5F00\u542F\u6697\u9ED1\u6A21\u5F0F
    331. 

  331. </span><span class="token prefix inserted">+</span><span class="token line">         }),
    332. 

  332. </span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
    333. 

  333. </span><span class="token prefix inserted">+</span><span class="token line">       },
    334. 

  334. </span><span class="token prefix inserted">+</span><span class="token line">     },
    335. 

  335. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    336. 

  336. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    337. 

  337. </span></span>};
    338. 

  338. </code></pre>
    339. 

  339. <h2 id="\u793E\u533A\u6559\u7A0B-for-Antd-React">\u793E\u533A\u6559\u7A0B for Antd React <a class="header-anchor" href="#\u793E\u533A\u6559\u7A0B-for-Antd-React">
    340. 

  340.           <span aria-hidden="true" class="anchor">#</span>
    341. 

  341.         </a></h2>
    342. 

  342. <ul>
    343. 

  343. <li><a href="https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f" target="_blank" rel="noopener noreferrer">How to Customize Ant Design with React &amp; Webpack\u2026 the Missing Guide</a></li>
    344. 

  344. <li><a href="https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7" target="_blank" rel="noopener noreferrer">Theming Ant Design with Sass and Webpack</a></li>
    345. 

  345. </ul>
    346. 

  346. `,lastUpdated:1748060301809}},o={class:"markdown"};function l(c,n,r,i,d,u){return p(),a("article",o,n[0]||(n[0]=[e(`<h1 id="\u5B9A\u5236\u4E3B\u9898">\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5B9A\u5236\u4E3B\u9898"><span aria-hidden="true" class="anchor">#</span></a></h1><p>ant-design-vue \u7684\u7EC4\u4EF6\u7ED3\u6784\u53CA\u6837\u5F0F\u548C Antd React \u5B8C\u5168\u4E00\u81F4\uFF0C\u4F60\u53EF\u4EE5\u53C2\u8003 Antd React \u7684\u5B9A\u5236\u65B9\u5F0F\u8FDB\u884C\u914D\u7F6E\u3002</p><p>Ant Design \u8BBE\u8BA1\u89C4\u8303\u4E0A\u652F\u6301\u4E00\u5B9A\u7A0B\u5EA6\u7684\u6837\u5F0F\u5B9A\u5236\uFF0C\u4EE5\u6EE1\u8DB3\u4E1A\u52A1\u548C\u54C1\u724C\u4E0A\u591A\u6837\u5316\u7684\u89C6\u89C9\u9700\u6C42\uFF0C\u5305\u62EC\u4F46\u4E0D\u9650\u4E8E\u4E3B\u8272\u3001\u5706\u89D2\u3001\u8FB9\u6846\u548C\u90E8\u5206\u7EC4\u4EF6\u7684\u89C6\u89C9\u5B9A\u5236\u3002</p><p><img src="https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png" alt=""></p><h2 id="Ant-Design-Vue-\u7684\u6837\u5F0F\u53D8\u91CF">Ant Design Vue \u7684\u6837\u5F0F\u53D8\u91CF <a class="header-anchor" href="#Ant-Design-Vue-\u7684\u6837\u5F0F\u53D8\u91CF"><span aria-hidden="true" class="anchor">#</span></a></h2><p>antd \u7684\u6837\u5F0F\u4F7F\u7528\u4E86 <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a> \u4F5C\u4E3A\u5F00\u53D1\u8BED\u8A00\uFF0C\u5E76\u5B9A\u4E49\u4E86\u4E00\u7CFB\u5217\u5168\u5C40/\u7EC4\u4EF6\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u6839\u636E\u9700\u6C42\u8FDB\u884C\u76F8\u5E94\u8C03\u6574\u3002</p><p>\u4EE5\u4E0B\u662F\u4E00\u4E9B\u6700\u5E38\u7528\u7684\u901A\u7528\u53D8\u91CF\uFF0C\u6240\u6709\u6837\u5F0F\u53D8\u91CF\u53EF\u4EE5\u5728 <a href="https://github.com/vueComponent/ant-design-vue/blob/main/components/style/themes/default.less" target="_blank" rel="noopener noreferrer">\u8FD9\u91CC</a> \u627E\u5230\u3002</p><pre class="language-less"><code><span class="token variable">@primary-color<span class="token punctuation">:</span></span> #1890ff<span class="token punctuation">;</span> <span class="token comment">// \u5168\u5C40\u4E3B\u8272</span>
    347. 

  347. <span class="token variable">@link-color<span class="token punctuation">:</span></span> #1890ff<span class="token punctuation">;</span> <span class="token comment">// \u94FE\u63A5\u8272</span>
    348. 

  348. <span class="token variable">@success-color<span class="token punctuation">:</span></span> #52c41a<span class="token punctuation">;</span> <span class="token comment">// \u6210\u529F\u8272</span>
    349. 

  349. <span class="token variable">@warning-color<span class="token punctuation">:</span></span> #faad14<span class="token punctuation">;</span> <span class="token comment">// \u8B66\u544A\u8272</span>
    350. 

  350. <span class="token variable">@error-color<span class="token punctuation">:</span></span> #f5222d<span class="token punctuation">;</span> <span class="token comment">// \u9519\u8BEF\u8272</span>
    351. 

  351. <span class="token variable">@font-size-base<span class="token punctuation">:</span></span> 14px<span class="token punctuation">;</span> <span class="token comment">// \u4E3B\u5B57\u53F7</span>
    352. 

  352. <span class="token variable">@heading-color<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.85<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u6807\u9898\u8272</span>
    353. 

  353. <span class="token variable">@text-color<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.65<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u4E3B\u6587\u672C\u8272</span>
    354. 

  354. <span class="token variable">@text-color-secondary<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.45<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u6B21\u6587\u672C\u8272</span>
    355. 

  355. <span class="token variable">@disabled-color<span class="token punctuation">:</span></span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.25<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u5931\u6548\u8272</span>
    356. 

  356. <span class="token variable">@border-radius-base<span class="token punctuation">:</span></span> 2px<span class="token punctuation">;</span> <span class="token comment">// \u7EC4\u4EF6/\u6D6E\u5C42\u5706\u89D2</span>
    357. 

  357. <span class="token variable">@border-color-base<span class="token punctuation">:</span></span> #d9d9d9<span class="token punctuation">;</span> <span class="token comment">// \u8FB9\u6846\u8272</span>
    358. 

  358. <span class="token variable">@box-shadow-base<span class="token punctuation">:</span></span> 0 2px 8px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.15<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \u6D6E\u5C42\u9634\u5F71</span>
    359. 

  359. </code></pre><p>\u5982\u679C\u4EE5\u4E0A\u53D8\u91CF\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u5B9A\u5236\u9700\u6C42\uFF0C\u53EF\u4EE5\u7ED9\u6211\u4EEC\u63D0 issue\u3002</p><h2 id="\u5B9A\u5236\u65B9\u5F0F">\u5B9A\u5236\u65B9\u5F0F <a class="header-anchor" href="#\u5B9A\u5236\u65B9\u5F0F"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u6211\u4EEC\u4F7F\u7528 <a href="http://lesscss.org/usage/#using-less-in-the-browser-modify-variables" target="_blank" rel="noopener noreferrer">modifyVars</a> \u7684\u65B9\u5F0F\u6765\u8FDB\u884C\u8986\u76D6\u53D8\u91CF\u3002\u4E0B\u9762\u5C06\u9488\u5BF9\u4E0D\u540C\u7684\u573A\u666F\u63D0\u4F9B\u4E00\u4E9B\u5E38\u7528\u7684\u5B9A\u5236\u65B9\u5F0F\u3002</p><h3 id="\u5728-webpack-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 webpack \u4E2D\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5728-webpack-\u4E2D\u5B9A\u5236\u4E3B\u9898"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u6211\u4EEC\u4EE5 webpack@4 \u4E3A\u4F8B\u8FDB\u884C\u8BF4\u660E\uFF0C\u4EE5\u4E0B\u662F\u4E00\u4E2A <code>webpack.config.js</code> \u7684\u5178\u578B\u4F8B\u5B50\uFF0C\u5BF9 <a href="https://github.com/webpack-contrib/less-loader" target="_blank" rel="noopener noreferrer">less-loader</a> \u7684 options \u5C5E\u6027\u8FDB\u884C\u76F8\u5E94\u914D\u7F6E\u3002</p><pre class="language-diff"><code>// webpack.config.js
    360. 

  360. module.exports = {
    361. 

  361. <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
    362. 

  362. </span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
    363. 

  363. </span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
    364. 

  364. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;style-loader&#39;,
    365. 

  365. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    366. 

  366. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;css-loader&#39;, // translates CSS into CommonJS
    367. 

  367. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    368. 

  368. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;less-loader&#39;, // compiles Less to CSS
    369. 

  369. </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
    370. 

  370. </span><span class="token prefix inserted">+</span><span class="token line">       lessOptions: {
    371. 

  371. </span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: {
    372. 

  372. </span><span class="token prefix inserted">+</span><span class="token line">           &#39;primary-color&#39;: &#39;#1DA57A&#39;,
    373. 

  373. </span><span class="token prefix inserted">+</span><span class="token line">           &#39;link-color&#39;: &#39;#1DA57A&#39;,
    374. 

  374. </span><span class="token prefix inserted">+</span><span class="token line">           &#39;border-radius-base&#39;: &#39;2px&#39;,
    375. 

  375. </span><span class="token prefix inserted">+</span><span class="token line">         },
    376. 

  376. </span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
    377. 

  377. </span><span class="token prefix inserted">+</span><span class="token line">       }
    378. 

  378. </span><span class="token prefix inserted">+</span><span class="token line">     },
    379. 

  379. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    380. 

  380. </span><span class="token prefix unchanged"> </span><span class="token line">   // ...other rules
    381. 

  381. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    382. 

  382. </span><span class="token prefix unchanged"> </span><span class="token line"> // ...other config
    383. 

  383. </span></span>}
    384. 

  384. </code></pre><p>\u6CE8\u610F less-loader \u7684\u5904\u7406\u8303\u56F4\u4E0D\u8981\u8FC7\u6EE4\u6389 <code>node_modules</code> \u4E0B\u7684 antd \u5305\u3002</p><h3 id="\u5728-vue-cli-2-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 vue cli 2 \u4E2D\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5728-vue-cli-2-\u4E2D\u5B9A\u5236\u4E3B\u9898"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u4FEE\u6539<code>build/utils.js</code>\u6587\u4EF6</p><pre class="language-diff"><code>// build/utils.js
    385. 

  385. <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> less: generateLoaders(&#39;less&#39;),
    386. 

  386. </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> less: generateLoaders(&#39;less&#39;, {
    387. 

  387. </span><span class="token prefix inserted">+</span><span class="token line">   modifyVars: {
    388. 

  388. </span><span class="token prefix inserted">+</span><span class="token line">     &#39;primary-color&#39;: &#39;#1DA57A&#39;,
    389. 

  389. </span><span class="token prefix inserted">+</span><span class="token line">     &#39;link-color&#39;: &#39;#1DA57A&#39;,
    390. 

  390. </span><span class="token prefix inserted">+</span><span class="token line">     &#39;border-radius-base&#39;: &#39;2px&#39;,
    391. 

  391. </span><span class="token prefix inserted">+</span><span class="token line">   },
    392. 

  392. </span><span class="token prefix inserted">+</span><span class="token line">   javascriptEnabled: true,
    393. 

  393. </span><span class="token prefix inserted">+</span><span class="token line"> }),
    394. 

  394. </span></span>
    395. 

  395. </code></pre><h3 id="\u5728-vue-cli-3-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 vue cli 3 \u4E2D\u5B9A\u5236\u4E3B\u9898 <a class="header-anchor" href="#\u5728-vue-cli-3-\u4E2D\u5B9A\u5236\u4E3B\u9898"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u9879\u76EE\u6839\u76EE\u5F55\u4E0B\u65B0\u5EFA\u6587\u4EF6<code>vue.config.js</code></p><pre class="language-js"><code><span class="token comment">// vue.config.js for less-loader@6.0.0</span>
    396. 

  396. module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    397. 

  397.   <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    398. 

  398.     <span class="token literal-property property">loaderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    399. 

  399.       <span class="token literal-property property">less</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    400. 

  400.         <span class="token literal-property property">lessOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    401. 

  401.           <span class="token literal-property property">modifyVars</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    402. 

  402.             <span class="token string-property property">&#39;primary-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;#1DA57A&#39;</span><span class="token punctuation">,</span>
    403. 

  403.             <span class="token string-property property">&#39;link-color&#39;</span><span class="token operator">:</span> <span class="token string">&#39;#1DA57A&#39;</span><span class="token punctuation">,</span>
    404. 

  404.             <span class="token string-property property">&#39;border-radius-base&#39;</span><span class="token operator">:</span> <span class="token string">&#39;2px&#39;</span><span class="token punctuation">,</span>
    405. 

  405.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    406. 

  406.           <span class="token literal-property property">javascriptEnabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    407. 

  407.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    408. 

  408.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    409. 

  409.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    410. 

  410.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    411. 

  411. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    412. 

  412. </code></pre><h3 id="\u914D\u7F6E-less-\u53D8\u91CF\u6587\u4EF6">\u914D\u7F6E less \u53D8\u91CF\u6587\u4EF6 <a class="header-anchor" href="#\u914D\u7F6E-less-\u53D8\u91CF\u6587\u4EF6"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u53E6\u5916\u4E00\u79CD\u65B9\u5F0F\u662F\u5EFA\u7ACB\u4E00\u4E2A\u5355\u72EC\u7684 <code>less</code> \u53D8\u91CF\u6587\u4EF6\uFF0C\u5F15\u5165\u8FD9\u4E2A\u6587\u4EF6\u8986\u76D6 <code>antd.less</code> \u91CC\u7684\u53D8\u91CF\u3002</p><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token string">&#39;~ant-design-vue/dist/antd.less&#39;</span><span class="token punctuation">;</span></span> // \u5F15\u5165\u5B98\u65B9\u63D0\u4F9B\u7684 less \u6837\u5F0F\u5165\u53E3\u6587\u4EF6
    413. 

  413. <span class="token atrule"><span class="token rule">@import</span> <span class="token string">&#39;your-theme-file.less&#39;</span><span class="token punctuation">;</span></span> // \u7528\u4E8E\u8986\u76D6\u4E0A\u9762\u5B9A\u4E49\u7684\u53D8\u91CF
    414. 

  414. </code></pre><p>\u6CE8\u610F\uFF0C\u8FD9\u79CD\u65B9\u5F0F\u5DF2\u7ECF\u8F7D\u5165\u4E86\u6240\u6709\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u4E0D\u9700\u8981\u4E5F\u65E0\u6CD5\u548C\u6309\u9700\u52A0\u8F7D\u63D2\u4EF6 <code>babel-plugin-import</code> \u7684 <code>style</code> \u5C5E\u6027\u4E00\u8D77\u4F7F\u7528\u3002</p><h3 id="\u52A8\u6001\u4E3B\u9898\u8272">\u52A8\u6001\u4E3B\u9898\u8272 <a class="header-anchor" href="#\u52A8\u6001\u4E3B\u9898\u8272"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u5728\u8FD0\u884C\u65F6\u8C03\u6574\u4E3B\u9898\u8272\u8BF7<a href="/docs/vue/customize-theme-variable">\u53C2\u8003\u6B64\u5904</a>\u3002</p><h2 id="\u6CA1\u6709\u751F\u6548\uFF1F">\u6CA1\u6709\u751F\u6548\uFF1F <a class="header-anchor" href="#\u6CA1\u6709\u751F\u6548\uFF1F"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u6CE8\u610F\u6837\u5F0F\u5FC5\u987B\u52A0\u8F7D less \u683C\u5F0F\uFF0C\u4E00\u4E2A\u5E38\u89C1\u7684\u95EE\u9898\u5C31\u662F\u5F15\u5165\u4E86\u591A\u4EFD\u6837\u5F0F\uFF0Cless \u7684\u6837\u5F0F\u88AB css \u7684\u6837\u5F0F\u8986\u76D6\u4E86\u3002</p><ul><li>\u5982\u679C\u4F60\u5728\u4F7F\u7528 <a href="https://github.com/ant-design/babel-plugin-import" target="_blank" rel="noopener noreferrer">babel-plugin-import</a> \u7684 <code>style</code> \u914D\u7F6E\u6765\u5F15\u5165\u6837\u5F0F\uFF0C\u9700\u8981\u5C06\u914D\u7F6E\u503C\u4ECE <code>&#39;css&#39;</code> \u6539\u4E3A <code>true</code>\uFF0C\u8FD9\u6837\u4F1A\u5F15\u5165 less \u6587\u4EF6\u3002</li><li>\u5982\u679C\u4F60\u662F\u901A\u8FC7 <code>&#39;ant-design-vue/dist/antd.css&#39;</code> \u5F15\u5165\u6837\u5F0F\u7684\uFF0C\u6539\u4E3A <code>ant-design-vue/dist/antd.less</code>\u3002</li></ul><h2 id="\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898">\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898 <a class="header-anchor" href="#\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u65B9\u5F0F\u4E00\uFF1A\u5728\u6837\u5F0F\u6587\u4EF6\u5168\u91CF\u5F15\u5165 <a href="https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less" target="_blank" rel="noopener noreferrer">antd.dark.less</a>\u3002</p><pre class="language-less"><code><span class="token variable">@import</span> <span class="token string">&#39;~ant-design-vue/dist/antd.dark.less&#39;</span><span class="token punctuation">;</span> <span class="token comment">// \u5F15\u5165\u5B98\u65B9\u63D0\u4F9B\u7684\u6697\u8272 less \u6837\u5F0F\u5165\u53E3\u6587\u4EF6</span>
    415. 

  415. </code></pre><p>\u5982\u679C\u9879\u76EE\u4E0D\u4F7F\u7528 Less\uFF0C\u53EF\u5728 CSS \u6587\u4EF6\u4E2D\u5168\u91CF\u5F15\u5165 <a href="https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.css" target="_blank" rel="noopener noreferrer">antd.dark.css</a>\u3002</p><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token string">&#39;~ant-design-vue/dist/antd.dark.css&#39;</span><span class="token punctuation">;</span></span>
    416. 

  416. </code></pre><blockquote><p>\u6CE8\u610F\u8FD9\u79CD\u65B9\u5F0F\u4E0B\u4F60\u4E0D\u9700\u8981\u518D\u5F15\u5165 <code>ant-design-vue/dist/antd.less</code> \u6216 <code>ant-design-vue/dist/antd.css</code> \u4E86\uFF0C\u53EF\u4EE5\u5B89\u5168\u79FB\u9664\u6389\u3002\u4E5F\u4E0D\u9700\u8981\u5F00\u542F babel-plugin-import \u7684 <code>style</code> \u914D\u7F6E\u3002\u901A\u8FC7\u6B64\u65B9\u5F0F\u4E0D\u80FD\u540C\u65F6\u914D\u7F6E\u4E24\u79CD\u53CA\u4EE5\u4E0A\u4E3B\u9898\u3002</p></blockquote><p>\u65B9\u5F0F\u4E8C\uFF1A\u662F\u7528\u5728 <code>webpack.config.js</code> \u4F7F\u7528 <a href="https://github.com/webpack-contrib/less-loader" target="_blank" rel="noopener noreferrer">less-loader</a> \u6309\u9700\u5F15\u5165\uFF1A</p><pre class="language-diff"><code>const { getThemeVariables } = require(&#39;ant-design-vue/dist/theme&#39;);
    417. 

  417. 

  418. // webpack.config.js
    419. 

  419. module.exports = {
    420. 

  420. <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
    421. 

  421. </span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
    422. 

  422. </span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
    423. 

  423. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;style-loader&#39;,
    424. 

  424. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    425. 

  425. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;css-loader&#39;, // translates CSS into CommonJS
    426. 

  426. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    427. 

  427. </span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;less-loader&#39;, // compiles Less to CSS
    428. 

  428. </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
    429. 

  429. </span><span class="token prefix inserted">+</span><span class="token line">       lessOptions: { // \u5982\u679C\u4F7F\u7528less-loader@5\uFF0C\u8BF7\u79FB\u9664 lessOptions \u8FD9\u4E00\u7EA7\u76F4\u63A5\u914D\u7F6E\u9009\u9879\u3002
    430. 

  430. </span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: getThemeVariables({
    431. 

  431. </span><span class="token prefix inserted">+</span><span class="token line">           dark: true, // \u5F00\u542F\u6697\u9ED1\u6A21\u5F0F
    432. 

  432. </span><span class="token prefix inserted">+</span><span class="token line">         }),
    433. 

  433. </span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
    434. 

  434. </span><span class="token prefix inserted">+</span><span class="token line">       },
    435. 

  435. </span><span class="token prefix inserted">+</span><span class="token line">     },
    436. 

  436. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    437. 

  437. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    438. 

  438. </span></span>};
    439. 

  439. </code></pre><h2 id="\u793E\u533A\u6559\u7A0B-for-Antd-React">\u793E\u533A\u6559\u7A0B for Antd React <a class="header-anchor" href="#\u793E\u533A\u6559\u7A0B-for-Antd-React"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li><a href="https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f" target="_blank" rel="noopener noreferrer">How to Customize Ant Design with React &amp; Webpack\u2026 the Missing Guide</a></li><li><a href="https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7" target="_blank" rel="noopener noreferrer">Theming Ant Design with Sass and Webpack</a></li></ul>`,40)]))}const h=s(t,[["render",l]]);export{h as default};
    440.