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

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

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

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

## Ant Design Vue \u7684\u6837\u5F0F\u53D8\u91CF

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

\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

\`\`\`less
@primary-color: #1890ff; // \u5168\u5C40\u4E3B\u8272
@link-color: #1890ff; // \u94FE\u63A5\u8272
@success-color: #52c41a; // \u6210\u529F\u8272
@warning-color: #faad14; // \u8B66\u544A\u8272
@error-color: #f5222d; // \u9519\u8BEF\u8272
@font-size-base: 14px; // \u4E3B\u5B57\u53F7
@heading-color: rgba(0, 0, 0, 0.85); // \u6807\u9898\u8272
@text-color: rgba(0, 0, 0, 0.65); // \u4E3B\u6587\u672C\u8272
@text-color-secondary: rgba(0, 0, 0, 0.45); // \u6B21\u6587\u672C\u8272
@disabled-color: rgba(0, 0, 0, 0.25); // \u5931\u6548\u8272
@border-radius-base: 2px; // \u7EC4\u4EF6/\u6D6E\u5C42\u5706\u89D2
@border-color-base: #d9d9d9; // \u8FB9\u6846\u8272
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // \u6D6E\u5C42\u9634\u5F71
\`\`\`

\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

## \u5B9A\u5236\u65B9\u5F0F

\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

### \u5728 webpack \u4E2D\u5B9A\u5236\u4E3B\u9898

\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

\`\`\`diff
// webpack.config.js
module.exports = {
  rules: [{
    test: /\\.less$/,
    use: [{
      loader: &#39;style-loader&#39;,
    }, {
      loader: &#39;css-loader&#39;, // translates CSS into CommonJS
    }, {
      loader: &#39;less-loader&#39;, // compiles Less to CSS
+     options: {
+       lessOptions: {
+         modifyVars: {
+           &#39;primary-color&#39;: &#39;#1DA57A&#39;,
+           &#39;link-color&#39;: &#39;#1DA57A&#39;,
+           &#39;border-radius-base&#39;: &#39;2px&#39;,
+         },
+         javascriptEnabled: true,
+       }
+     },
    }],
    // ...other rules
  }],
  // ...other config
}
\`\`\`

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

### \u5728 vue cli 2 \u4E2D\u5B9A\u5236\u4E3B\u9898

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

\`\`\`diff
// build/utils.js
- less: generateLoaders(&#39;less&#39;),
+ less: generateLoaders(&#39;less&#39;, {
+   modifyVars: {
+     &#39;primary-color&#39;: &#39;#1DA57A&#39;,
+     &#39;link-color&#39;: &#39;#1DA57A&#39;,
+     &#39;border-radius-base&#39;: &#39;2px&#39;,
+   },
+   javascriptEnabled: true,
+ }),

\`\`\`

### \u5728 vue cli 3 \u4E2D\u5B9A\u5236\u4E3B\u9898

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

\`\`\`js
// vue.config.js for less-loader@6.0.0
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            &#39;primary-color&#39;: &#39;#1DA57A&#39;,
            &#39;link-color&#39;: &#39;#1DA57A&#39;,
            &#39;border-radius-base&#39;: &#39;2px&#39;,
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};
\`\`\`

### \u914D\u7F6E less \u53D8\u91CF\u6587\u4EF6

\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

\`\`\`css
@import &#39;~ant-design-vue/dist/antd.less&#39;; // \u5F15\u5165\u5B98\u65B9\u63D0\u4F9B\u7684 less \u6837\u5F0F\u5165\u53E3\u6587\u4EF6
@import &#39;your-theme-file.less&#39;; // \u7528\u4E8E\u8986\u76D6\u4E0A\u9762\u5B9A\u4E49\u7684\u53D8\u91CF
\`\`\`

\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

### \u52A8\u6001\u4E3B\u9898\u8272

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

## \u6CA1\u6709\u751F\u6548\uFF1F

\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

- \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 \`&#39;css&#39;\` \u6539\u4E3A \`true\`\uFF0C\u8FD9\u6837\u4F1A\u5F15\u5165 less \u6587\u4EF6\u3002
- \u5982\u679C\u4F60\u662F\u901A\u8FC7 \`&#39;ant-design-vue/dist/antd.css&#39;\` \u5F15\u5165\u6837\u5F0F\u7684\uFF0C\u6539\u4E3A \`ant-design-vue/dist/antd.less\`\u3002

## \u4F7F\u7528\u6697\u9ED1\u4E3B\u9898

\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

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

\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

\`\`\`css
@import &#39;~ant-design-vue/dist/antd.dark.css&#39;;
\`\`\`

&gt; \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

\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

\`\`\`diff
const { getThemeVariables } = require(&#39;ant-design-vue/dist/theme&#39;);

// webpack.config.js
module.exports = {
  rules: [{
    test: /\\.less$/,
    use: [{
      loader: &#39;style-loader&#39;,
    }, {
      loader: &#39;css-loader&#39;, // translates CSS into CommonJS
    }, {
      loader: &#39;less-loader&#39;, // compiles Less to CSS
+     options: {
+       lessOptions: { // \u5982\u679C\u4F7F\u7528less-loader@5\uFF0C\u8BF7\u79FB\u9664 lessOptions \u8FD9\u4E00\u7EA7\u76F4\u63A5\u914D\u7F6E\u9009\u9879\u3002
+         modifyVars: getThemeVariables({
+           dark: true, // \u5F00\u542F\u6697\u9ED1\u6A21\u5F0F
+         }),
+         javascriptEnabled: true,
+       },
+     },
    }],
  }],
};
\`\`\`

## \u793E\u533A\u6559\u7A0B for Antd React

- [How to Customize Ant Design with React &amp; Webpack\u2026 the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
`,html:`<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" 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</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" v-pre><code>// webpack.config.js
module.exports = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
</span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
</span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'style-loader',
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'css-loader', // translates CSS into CommonJS
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'less-loader', // compiles Less to CSS
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
</span><span class="token prefix inserted">+</span><span class="token line">       lessOptions: {
</span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: {
</span><span class="token prefix inserted">+</span><span class="token line">           'primary-color': '#1DA57A',
</span><span class="token prefix inserted">+</span><span class="token line">           'link-color': '#1DA57A',
</span><span class="token prefix inserted">+</span><span class="token line">           'border-radius-base': '2px',
</span><span class="token prefix inserted">+</span><span class="token line">         },
</span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
</span><span class="token prefix inserted">+</span><span class="token line">       }
</span><span class="token prefix inserted">+</span><span class="token line">     },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
</span><span class="token prefix unchanged"> </span><span class="token line">   // ...other rules
</span><span class="token prefix unchanged"> </span><span class="token line"> }],
</span><span class="token prefix unchanged"> </span><span class="token line"> // ...other config
</span></span>}
</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" v-pre><code>// build/utils.js
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> less: generateLoaders('less'),
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> less: generateLoaders('less', {
</span><span class="token prefix inserted">+</span><span class="token line">   modifyVars: {
</span><span class="token prefix inserted">+</span><span class="token line">     'primary-color': '#1DA57A',
</span><span class="token prefix inserted">+</span><span class="token line">     'link-color': '#1DA57A',
</span><span class="token prefix inserted">+</span><span class="token line">     'border-radius-base': '2px',
</span><span class="token prefix inserted">+</span><span class="token line">   },
</span><span class="token prefix inserted">+</span><span class="token line">   javascriptEnabled: true,
</span><span class="token prefix inserted">+</span><span class="token line"> }),
</span></span>
</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" v-pre><code><span class="token comment">// vue.config.js for less-loader@6.0.0</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">loaderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">less</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">lessOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">modifyVars</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <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>
            <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>
            <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>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token literal-property property">javascriptEnabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</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" 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
<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
</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>'css'</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>'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>
</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" 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>
</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" 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>
</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" v-pre><code>const { getThemeVariables } = require('ant-design-vue/dist/theme');

// webpack.config.js
module.exports = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
</span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
</span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'style-loader',
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'css-loader', // translates CSS into CommonJS
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: 'less-loader', // compiles Less to CSS
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
</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
</span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: getThemeVariables({
</span><span class="token prefix inserted">+</span><span class="token line">           dark: true, // \u5F00\u542F\u6697\u9ED1\u6A21\u5F0F
</span><span class="token prefix inserted">+</span><span class="token line">         }),
</span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
</span><span class="token prefix inserted">+</span><span class="token line">       },
</span><span class="token prefix inserted">+</span><span class="token line">     },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
</span><span class="token prefix unchanged"> </span><span class="token line"> }],
</span></span>};
</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>
`,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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</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
module.exports = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
</span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
</span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;style-loader&#39;,
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;css-loader&#39;, // translates CSS into CommonJS
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;less-loader&#39;, // compiles Less to CSS
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
</span><span class="token prefix inserted">+</span><span class="token line">       lessOptions: {
</span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: {
</span><span class="token prefix inserted">+</span><span class="token line">           &#39;primary-color&#39;: &#39;#1DA57A&#39;,
</span><span class="token prefix inserted">+</span><span class="token line">           &#39;link-color&#39;: &#39;#1DA57A&#39;,
</span><span class="token prefix inserted">+</span><span class="token line">           &#39;border-radius-base&#39;: &#39;2px&#39;,
</span><span class="token prefix inserted">+</span><span class="token line">         },
</span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
</span><span class="token prefix inserted">+</span><span class="token line">       }
</span><span class="token prefix inserted">+</span><span class="token line">     },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
</span><span class="token prefix unchanged"> </span><span class="token line">   // ...other rules
</span><span class="token prefix unchanged"> </span><span class="token line"> }],
</span><span class="token prefix unchanged"> </span><span class="token line"> // ...other config
</span></span>}
</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
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> less: generateLoaders(&#39;less&#39;),
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> less: generateLoaders(&#39;less&#39;, {
</span><span class="token prefix inserted">+</span><span class="token line">   modifyVars: {
</span><span class="token prefix inserted">+</span><span class="token line">     &#39;primary-color&#39;: &#39;#1DA57A&#39;,
</span><span class="token prefix inserted">+</span><span class="token line">     &#39;link-color&#39;: &#39;#1DA57A&#39;,
</span><span class="token prefix inserted">+</span><span class="token line">     &#39;border-radius-base&#39;: &#39;2px&#39;,
</span><span class="token prefix inserted">+</span><span class="token line">   },
</span><span class="token prefix inserted">+</span><span class="token line">   javascriptEnabled: true,
</span><span class="token prefix inserted">+</span><span class="token line"> }),
</span></span>
</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>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">loaderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">less</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">lessOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">modifyVars</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <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>
            <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>
            <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>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token literal-property property">javascriptEnabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</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
<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
</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>
</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>
</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;);

// webpack.config.js
module.exports = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> rules: [{
</span><span class="token prefix unchanged"> </span><span class="token line">   test: /\\.less$/,
</span><span class="token prefix unchanged"> </span><span class="token line">   use: [{
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;style-loader&#39;,
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;css-loader&#39;, // translates CSS into CommonJS
</span><span class="token prefix unchanged"> </span><span class="token line">   }, {
</span><span class="token prefix unchanged"> </span><span class="token line">     loader: &#39;less-loader&#39;, // compiles Less to CSS
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">     options: {
</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
</span><span class="token prefix inserted">+</span><span class="token line">         modifyVars: getThemeVariables({
</span><span class="token prefix inserted">+</span><span class="token line">           dark: true, // \u5F00\u542F\u6697\u9ED1\u6A21\u5F0F
</span><span class="token prefix inserted">+</span><span class="token line">         }),
</span><span class="token prefix inserted">+</span><span class="token line">         javascriptEnabled: true,
</span><span class="token prefix inserted">+</span><span class="token line">       },
</span><span class="token prefix inserted">+</span><span class="token line">     },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">   }],
</span><span class="token prefix unchanged"> </span><span class="token line"> }],
</span></span>};
</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};