Startsida Utforska Hjälp
Registrera dig Logga in
wicresoft
/
doc_project
2
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Träd: 9cd9c7d1d5
Grenar Taggar
doc_project
/
2x.antv.design
/
assets
/
customize-theme.zh-CN.fbe9ec6f.js

customize-theme.zh-CN.fbe9ec6f.js 50 KB
Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410 
  1. import{_ as s,a,n as e,k as p}from"./index.c1b9962e.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: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:"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/next/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: 4px; // \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. ## \u6CA1\u6709\u751F\u6548\uFF1F
    125. 

  125. 

  126. \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
    127. 

  127. 

  128. - \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
    129. 

  129. - \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
    130. 

  130. 

  131. ## \u4F7F\u7528\u6697\u9ED1\u4E3B\u9898
    132. 

  132. 

  133. \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
    134. 

  134. \`\`\`less
    135. 

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

  136. \`\`\`
    137. 

  137. 

  138. \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
    139. 

  139. 

  140. \`\`\`css
    141. 

  141. @import '~ant-design-vue/dist/antd.dark.css';
    142. 

  142. \`\`\`
    143. 

  143. 

  144. > \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
    145. 

  145. 

  146. \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
    147. 

  147. 

  148. \`\`\`diff
    149. 

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

  150. 

  151. // webpack.config.js
    152. 

  152. module.exports = {
    153. 

  153.   rules: [{
    154. 

  154.     test: /\\.less$/,
    155. 

  155.     use: [{
    156. 

  156.       loader: 'style-loader',
    157. 

  157.     }, {
    158. 

  158.       loader: 'css-loader', // translates CSS into CommonJS
    159. 

  159.     }, {
    160. 

  160.       loader: 'less-loader', // compiles Less to CSS
    161. 

  161. +     options: {
    162. 

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

  163. +         modifyVars: getThemeVariables({
    164. 

  164. +           dark: true, // \u5F00\u542F\u6697\u9ED1\u6A21\u5F0F
    165. 

  165. +         }),
    166. 

  166. +         javascriptEnabled: true,
    167. 

  167. +       },
    168. 

  168. +     },
    169. 

  169.     }],
    170. 

  170.   }],
    171. 

  171. };
    172. 

  172. \`\`\`
    173. 

  173. 

  174. ## \u793E\u533A\u6559\u7A0B for Antd React
    175. 

  175. 

  176. - [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)
    177. 

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

  178. `,html:`<h1 id="\u5B9A\u5236\u4E3B\u9898">\u5B9A\u5236\u4E3B\u9898</h1>
    179. 

  179. <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>
    180. 

  180. <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>
    181. 

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

  182. <h2 id="ant-design-vue-\u7684\u6837\u5F0F\u53D8\u91CF">Ant Design Vue \u7684\u6837\u5F0F\u53D8\u91CF</h2>
    183. 

  183. <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>
    184. 

  184. <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/next/components/style/themes/default.less" target="_blank" rel="noopener noreferrer">\u8FD9\u91CC</a> \u627E\u5230\u3002</p>
    185. 

  185. <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>
    186. 

  186. <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>
    187. 

  187. <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>
    188. 

  188. <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>
    189. 

  189. <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>
    190. 

  190. <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>
    191. 

  191. <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>
    192. 

  192. <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>
    193. 

  193. <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>
    194. 

  194. <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>
    195. 

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

  196. <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>
    197. 

  197. <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>
    198. 

  198. </code></pre>
    199. 

  199. <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>
    200. 

  200. <h2 id="\u5B9A\u5236\u65B9\u5F0F">\u5B9A\u5236\u65B9\u5F0F</h2>
    201. 

  201. <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>
    202. 

  202. <h3 id="\u5728-webpack-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 webpack \u4E2D\u5B9A\u5236\u4E3B\u9898</h3>
    203. 

  203. <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>
    204. 

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

  205. module.exports = {
    206. 

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

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

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

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

  210. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    211. 

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

  212. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    213. 

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

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

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

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

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

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

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

  220. </span><span class="token prefix inserted">+</span><span class="token line">         },
    221. 

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

  222. </span><span class="token prefix inserted">+</span><span class="token line">       }
    223. 

  223. </span><span class="token prefix inserted">+</span><span class="token line">     },
    224. 

  224. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    225. 

  225. </span><span class="token prefix unchanged"> </span><span class="token line">   // ...other rules
    226. 

  226. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    227. 

  227. </span><span class="token prefix unchanged"> </span><span class="token line"> // ...other config
    228. 

  228. </span></span>}
    229. 

  229. </code></pre>
    230. 

  230. <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>
    231. 

  231. <h3 id="\u5728-vue-cli-2-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 vue cli 2 \u4E2D\u5B9A\u5236\u4E3B\u9898</h3>
    232. 

  232. <p>\u4FEE\u6539<code>build/utils.js</code>\u6587\u4EF6</p>
    233. 

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

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

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

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

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

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

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

  240. </span><span class="token prefix inserted">+</span><span class="token line">   },
    241. 

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

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

  243. </span></span>
    244. 

  244. </code></pre>
    245. 

  245. <h3 id="\u5728-vue-cli-3-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 vue cli 3 \u4E2D\u5B9A\u5236\u4E3B\u9898</h3>
    246. 

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

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

  248. module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    249. 

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

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

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

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

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

  254.             <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>
    255. 

  255.             <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>
    256. 

  256.             <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>
    257. 

  257.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    258. 

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

  259.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    260. 

  260.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    261. 

  261.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    262. 

  262.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    263. 

  263. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    264. 

  264. </code></pre>
    265. 

  265. <h3 id="\u914D\u7F6E-less-\u53D8\u91CF\u6587\u4EF6">\u914D\u7F6E less \u53D8\u91CF\u6587\u4EF6</h3>
    266. 

  266. <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>
    267. 

  267. <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
    268. 

  268. <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
    269. 

  269. </code></pre>
    270. 

  270. <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>
    271. 

  271. <h2 id="\u6CA1\u6709\u751F\u6548\uFF1F">\u6CA1\u6709\u751F\u6548\uFF1F</h2>
    272. 

  272. <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>
    273. 

  273. <ul>
    274. 

  274. <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>
    275. 

  275. <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>
    276. 

  276. </ul>
    277. 

  277. <h2 id="\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898">\u4F7F\u7528\u6697\u9ED1\u4E3B\u9898</h2>
    278. 

  278. <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>
    279. 

  279. <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>
    280. 

  280. </code></pre>
    281. 

  281. <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>
    282. 

  282. <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>
    283. 

  283. </code></pre>
    284. 

  284. <blockquote>
    285. 

  285. <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>
    286. 

  286. </blockquote>
    287. 

  287. <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>
    288. 

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

  289. 

  290. // webpack.config.js
    291. 

  291. module.exports = {
    292. 

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

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

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

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

  296. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    297. 

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

  298. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    299. 

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

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

  301. </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
    302. 

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

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

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

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

  306. </span><span class="token prefix inserted">+</span><span class="token line">       },
    307. 

  307. </span><span class="token prefix inserted">+</span><span class="token line">     },
    308. 

  308. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    309. 

  309. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    310. 

  310. </span></span>};
    311. 

  311. </code></pre>
    312. 

  312. <h2 id="\u793E\u533A\u6559\u7A0B-for-antd-react">\u793E\u533A\u6559\u7A0B for Antd React</h2>
    313. 

  313. <ul>
    314. 

  314. <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>
    315. 

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

  316. </ul>
    317. 

  317. `,lastUpdated:1748059052826}},o={class:"markdown"};function l(c,n,r,i,u,d){return p(),a("article",o,n[0]||(n[0]=[e(`<h1 id="\u5B9A\u5236\u4E3B\u9898">\u5B9A\u5236\u4E3B\u9898</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</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/next/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>
    318. 

  318. <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>
    319. 

  319. <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>
    320. 

  320. <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>
    321. 

  321. <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>
    322. 

  322. <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>
    323. 

  323. <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>
    324. 

  324. <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>
    325. 

  325. <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>
    326. 

  326. <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>
    327. 

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

  328. <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>
    329. 

  329. <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>
    330. 

  330. </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</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</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
    331. 

  331. module.exports = {
    332. 

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

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

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

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

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

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

  338. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    339. 

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

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

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

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

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

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

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

  346. </span><span class="token prefix inserted">+</span><span class="token line">         },
    347. 

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

  348. </span><span class="token prefix inserted">+</span><span class="token line">       }
    349. 

  349. </span><span class="token prefix inserted">+</span><span class="token line">     },
    350. 

  350. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    351. 

  351. </span><span class="token prefix unchanged"> </span><span class="token line">   // ...other rules
    352. 

  352. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    353. 

  353. </span><span class="token prefix unchanged"> </span><span class="token line"> // ...other config
    354. 

  354. </span></span>}
    355. 

  355. </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</h3><p>\u4FEE\u6539<code>build/utils.js</code>\u6587\u4EF6</p><pre class="language-diff"><code>// build/utils.js
    356. 

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

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

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

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

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

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

  362. </span><span class="token prefix inserted">+</span><span class="token line">   },
    363. 

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

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

  365. </span></span>
    366. 

  366. </code></pre><h3 id="\u5728-vue-cli-3-\u4E2D\u5B9A\u5236\u4E3B\u9898">\u5728 vue cli 3 \u4E2D\u5B9A\u5236\u4E3B\u9898</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>
    367. 

  367. module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    368. 

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

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

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

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

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

  373.             <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>
    374. 

  374.             <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>
    375. 

  375.             <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>
    376. 

  376.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    377. 

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

  378.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    379. 

  379.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    380. 

  380.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    381. 

  381.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    382. 

  382. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    383. 

  383. </code></pre><h3 id="\u914D\u7F6E-less-\u53D8\u91CF\u6587\u4EF6">\u914D\u7F6E less \u53D8\u91CF\u6587\u4EF6</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
    384. 

  384. <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
    385. 

  385. </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><h2 id="\u6CA1\u6709\u751F\u6548\uFF1F">\u6CA1\u6709\u751F\u6548\uFF1F</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</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>
    386. 

  386. </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>
    387. 

  387. </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;);
    388. 

  388. 

  389. // webpack.config.js
    390. 

  390. module.exports = {
    391. 

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

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

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

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

  395. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    396. 

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

  397. </span><span class="token prefix unchanged"> </span><span class="token line">   }, {
    398. 

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

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

  400. </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
    401. 

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

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

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

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

  405. </span><span class="token prefix inserted">+</span><span class="token line">       },
    406. 

  406. </span><span class="token prefix inserted">+</span><span class="token line">     },
    407. 

  407. </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
    408. 

  408. </span><span class="token prefix unchanged"> </span><span class="token line"> }],
    409. 

  409. </span></span>};
    410. 

  410. </code></pre><h2 id="\u793E\u533A\u6559\u7A0B-for-antd-react">\u793E\u533A\u6559\u7A0B for Antd React</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>`,38)]))}var g=s(t,[["render",l]]);export{g as default};
    411.