wicresoft
/
doc_project


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
							import{_ as s,a,q as e,k as t}from"./index.3fe853a6.js";const o={pageData:{title:"\u52A8\u6001\u4E3B\u9898\uFF08\u5B9E\u9A8C\u6027\uFF09",description:"",frontmatter:{order:7.1,title:"\u52A8\u6001\u4E3B\u9898\uFF08\u5B9E\u9A8C\u6027\uFF09"},headers:[{level:2,title:"\u6CE8\u610F\u4E8B\u9879",slug:"\u6CE8\u610F\u4E8B\u9879",content:""},{level:2,title:"\u5982\u4F55\u4F7F\u7528",slug:"\u5982\u4F55\u4F7F\u7528",content:"\u5F15\u5165 antd.variable.min.css"},{level:3,title:"\u5F15\u5165 antd.variable.min.css",slug:"\u5F15\u5165-antd-variable-min-css",content:"\u66FF\u6362\u5F53\u524D\u9879\u76EE\u5F15\u5165\u6837\u5F0F\u6587\u4EF6\u4E3A CSS Variable \u7248\u672C\uFF1A"},{level:3,title:"\u9759\u6001\u65B9\u6CD5\u914D\u7F6E",slug:"\u9759\u6001\u65B9\u6CD5\u914D\u7F6E",content:"\u8C03\u7528 ConfigProvider \u914D\u7F6E\u65B9\u6CD5\u8BBE\u7F6E\u4E3B\u9898\u8272\uFF1A"},{level:2,title:"\u51B2\u7A81\u89E3\u51B3",slug:"\u51B2\u7A81\u89E3\u51B3",content:"\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CCSS Variable \u4F1A\u4EE5 `--ant` \u4F5C\u4E3A\u524D\u7F00\u3002\u5F53\u4F60\u7684\u9879\u76EE\u4E2D\u5F15\u7528\u591A\u4EFD css \u6587\u4EF6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4FEE\u6539\u524D\u7F00\u7684\u65B9\u5F0F\u907F\u514D\u51B2\u7A81\u3002"},{level:3,title:"\u4EE3\u7801\u8C03\u6574",slug:"\u4EE3\u7801\u8C03\u6574",content:"\u901A\u8FC7 ConfigProvider \u5728\u9876\u5C42\u4FEE\u6539 `prefixCls`\uFF1A"},{level:3,title:"\u7F16\u8BD1 less",slug:"\u7F16\u8BD1-less",content:"\u7531\u4E8E\u524D\u7F00\u53D8\u66F4\uFF0C\u4F60\u9700\u8981\u91CD\u65B0\u751F\u6210\u4E00\u4EFD\u5BF9\u5E94\u7684 css \u6587\u4EF6\u3002"},{level:3,title:"\u76F8\u5173\u53D8\u66F4",slug:"\u76F8\u5173\u53D8\u66F4",content:"\u4E3A\u4E86\u5B9E\u73B0 CSS Variable \u5E76\u4FDD\u6301\u539F\u59CB\u7528\u6CD5\u517C\u5BB9\u6027\uFF0C\u6211\u4EEC\u4E8E `dist/antd.xxx.less` \u6587\u4EF6\u4E2D\u6DFB\u52A0\u4E86 `@root-entry-name: xxx;` \u5165\u53E3\u6CE8\u5165\u4EE5\u652F\u6301 less \u52A8\u6001\u52A0\u8F7D\u5BF9\u5E94\u7684 less \u6587\u4EF6\u3002\u4E00\u822C\u60C5\u51B5\u4E0B\uFF0C\u4F60\u4E0D\u9700\u8981\u5173\u6CE8\u8BE5\u53D8\u5316\u3002\u4F46\u662F\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u76F4\u63A5\u5F15\u7528\u4E86 `lib|es` \u76EE\u5F55\u4E0B\u7684 less \u6587\u4EF6\u3002\u4F60\u9700\u8981\u5728 less \u5165\u53E3\u5904\u914D\u7F6E `@root-entry-name: default;` \uFF08\u6216\u8005 `@root-entry-name: variable;`\uFF09\u4EE5\u4F7F less \u53EF\u4EE5\u627E\u5230\u6B63\u786E\u7684\u5165\u53E3\u3002"}],relativePath:"site/src/vueDocs/customize-theme-variable.zh-CN.md",content:`
\u9664\u4E86 [less \u5B9A\u5236\u4E3B\u9898](/docs/vue/customize-theme) \u5916\uFF0C\u6211\u4EEC\u8FD8\u63D0\u4F9B\u4E86 CSS Variable \u7248\u672C\u4EE5\u652F\u6301\u52A8\u6001\u5207\u6362\u4E3B\u9898\u80FD\u529B\u3002\u4F60\u53EF\u4EE5\u5728 [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) \u8FDB\u884C\u4F53\u9A8C\u3002

## \u6CE8\u610F\u4E8B\u9879

- \u8BE5\u529F\u80FD\u5728 \`ant-design-vue@3.1.0-beta.0\` \u7248\u672C\u8D77\u652F\u6301\u3002

## \u5982\u4F55\u4F7F\u7528

### \u5F15\u5165 antd.variable.min.css

\u66FF\u6362\u5F53\u524D\u9879\u76EE\u5F15\u5165\u6837\u5F0F\u6587\u4EF6\u4E3A CSS Variable \u7248\u672C\uFF1A

\`\`\`diff
-- import &#39;ant-design-vue/dist/antd.min.css&#39;;
++ import &#39;ant-design-vue/dist/antd.variable.min.css&#39;;
\`\`\`

\u6CE8\uFF1A\u5982\u679C\u4F60\u4F7F\u7528\u4E86 \`babel-plugin-import\`\uFF0C\u9700\u8981\u5C06\u5176\u53BB\u9664\u3002

### \u9759\u6001\u65B9\u6CD5\u914D\u7F6E

\u8C03\u7528 ConfigProvider \u914D\u7F6E\u65B9\u6CD5\u8BBE\u7F6E\u4E3B\u9898\u8272\uFF1A

\`\`\`ts
import { ConfigProvider } from &#39;ant-design-vue&#39;;

ConfigProvider.config({
  theme: {
    primaryColor: &#39;#25b864&#39;,
  },
});
\`\`\`

## \u51B2\u7A81\u89E3\u51B3

\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CCSS Variable \u4F1A\u4EE5 \`--ant\` \u4F5C\u4E3A\u524D\u7F00\u3002\u5F53\u4F60\u7684\u9879\u76EE\u4E2D\u5F15\u7528\u591A\u4EFD css \u6587\u4EF6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4FEE\u6539\u524D\u7F00\u7684\u65B9\u5F0F\u907F\u514D\u51B2\u7A81\u3002

### \u4EE3\u7801\u8C03\u6574

\u901A\u8FC7 ConfigProvider \u5728\u9876\u5C42\u4FEE\u6539 \`prefixCls\`\uFF1A

\`\`\`html
&lt;template&gt;
  &lt;a-config-provider prefix-cls=&quot;custom&quot;&gt;
    &lt;my-app /&gt;
  &lt;/a-config-provider&gt;
&lt;/template&gt;
\`\`\`

\u901A\u8FC7\u9759\u6001\u65B9\u6CD5\u8BBE\u7F6E\u4E3B\u9898\u8272\u4EE5\u53CA\u5BF9\u5E94 \`prefixCls\`\uFF1A

\`\`\`ts
import { ConfigProvider } from &#39;ant-design-vue&#39;;
ConfigProvider.config({
  prefixCls: &#39;custom&#39;,
  theme: {
    primaryColor: &#39;#25b864&#39;,
  },
});
\`\`\`

### \u7F16\u8BD1 less

\u7531\u4E8E\u524D\u7F00\u53D8\u66F4\uFF0C\u4F60\u9700\u8981\u91CD\u65B0\u751F\u6210\u4E00\u4EFD\u5BF9\u5E94\u7684 css \u6587\u4EF6\u3002

\`\`\`bash
lessc --js --modify-var=&quot;ant-prefix=custom&quot; ant-design-vue/dist/antd.variable.less modified.css
\`\`\`

### \u76F8\u5173\u53D8\u66F4

\u4E3A\u4E86\u5B9E\u73B0 CSS Variable \u5E76\u4FDD\u6301\u539F\u59CB\u7528\u6CD5\u517C\u5BB9\u6027\uFF0C\u6211\u4EEC\u4E8E \`dist/antd.xxx.less\` \u6587\u4EF6\u4E2D\u6DFB\u52A0\u4E86 \`@root-entry-name: xxx;\` \u5165\u53E3\u6CE8\u5165\u4EE5\u652F\u6301 less \u52A8\u6001\u52A0\u8F7D\u5BF9\u5E94\u7684 less \u6587\u4EF6\u3002\u4E00\u822C\u60C5\u51B5\u4E0B\uFF0C\u4F60\u4E0D\u9700\u8981\u5173\u6CE8\u8BE5\u53D8\u5316\u3002\u4F46\u662F\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u76F4\u63A5\u5F15\u7528\u4E86 \`lib|es\` \u76EE\u5F55\u4E0B\u7684 less \u6587\u4EF6\u3002\u4F60\u9700\u8981\u5728 less \u5165\u53E3\u5904\u914D\u7F6E \`@root-entry-name: default;\` \uFF08\u6216\u8005 \`@root-entry-name: variable;\`\uFF09\u4EE5\u4F7F less \u53EF\u4EE5\u627E\u5230\u6B63\u786E\u7684\u5165\u53E3\u3002

\u6B64\u5916\uFF0C\u6211\u4EEC\u5C06 \`lib|es/style/minxins/index.less\` \u4E2D\u7684 \`@import &#39;motion&#39;\` \u548C \`@import &#39;reset&#39;\` \u8FC1\u79FB\u81F3\u4E86 \`lib|es/style/themes/xxx.less\` \u4E2D\uFF0C\u56E0\u4E3A\u8FD9\u4E24\u4E2A\u6587\u4EF6\u4F9D\u8D56\u4E86\u4E3B\u9898\u76F8\u5173\u53D8\u91CF\u3002\u5982\u679C\u4F60\u4F7F\u7528\u4E86\u76F8\u5173\u5185\u90E8\u65B9\u6CD5\uFF0C\u8BF7\u81EA\u884C\u8C03\u6574\u3002\u5F53\u7136\uFF0C\u6211\u4EEC\u8FD8\u662F\u5EFA\u8BAE\u76F4\u63A5\u4F7F\u7528 \`dist\` \u76EE\u5F55\u4E0B\u7684 \`antd.less\` \u6587\u4EF6\u800C\u975E\u8C03\u7528\u5185\u90E8\u6587\u4EF6\uFF0C\u56E0\u4E3A\u5B83\u4EEC\u7ECF\u5E38\u4F1A\u53D7\u91CD\u6784\u5F71\u54CD\u3002
`,html:`<p>\u9664\u4E86 <a href="/docs/vue/customize-theme">less \u5B9A\u5236\u4E3B\u9898</a> \u5916\uFF0C\u6211\u4EEC\u8FD8\u63D0\u4F9B\u4E86 CSS Variable \u7248\u672C\u4EE5\u652F\u6301\u52A8\u6001\u5207\u6362\u4E3B\u9898\u80FD\u529B\u3002\u4F60\u53EF\u4EE5\u5728 <a href="/components/config-provider/#components-config-provider-demo-theme">ConfigProvider</a> \u8FDB\u884C\u4F53\u9A8C\u3002</p>
<h2 id="\u6CE8\u610F\u4E8B\u9879">\u6CE8\u610F\u4E8B\u9879 <a class="header-anchor" href="#\u6CE8\u610F\u4E8B\u9879">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<ul>
<li>\u8BE5\u529F\u80FD\u5728 <code>ant-design-vue@3.1.0-beta.0</code> \u7248\u672C\u8D77\u652F\u6301\u3002</li>
</ul>
<h2 id="\u5982\u4F55\u4F7F\u7528">\u5982\u4F55\u4F7F\u7528 <a class="header-anchor" href="#\u5982\u4F55\u4F7F\u7528">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="\u5F15\u5165-antd-variable-min-css">\u5F15\u5165 antd.variable.min.css <a class="header-anchor" href="#\u5F15\u5165-antd-variable-min-css">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>\u66FF\u6362\u5F53\u524D\u9879\u76EE\u5F15\u5165\u6837\u5F0F\u6587\u4EF6\u4E3A CSS Variable \u7248\u672C\uFF1A</p>
<pre class="language-diff" v-pre><code><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">- import 'ant-design-vue/dist/antd.min.css';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">+ import 'ant-design-vue/dist/antd.variable.min.css';
</span></span></code></pre>
<p>\u6CE8\uFF1A\u5982\u679C\u4F60\u4F7F\u7528\u4E86 <code>babel-plugin-import</code>\uFF0C\u9700\u8981\u5C06\u5176\u53BB\u9664\u3002</p>
<h3 id="\u9759\u6001\u65B9\u6CD5\u914D\u7F6E">\u9759\u6001\u65B9\u6CD5\u914D\u7F6E <a class="header-anchor" href="#\u9759\u6001\u65B9\u6CD5\u914D\u7F6E">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>\u8C03\u7528 ConfigProvider \u914D\u7F6E\u65B9\u6CD5\u8BBE\u7F6E\u4E3B\u9898\u8272\uFF1A</p>
<pre class="language-ts" v-pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>

ConfigProvider<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    primaryColor<span class="token operator">:</span> <span class="token string">'#25b864'</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>
<h2 id="\u51B2\u7A81\u89E3\u51B3">\u51B2\u7A81\u89E3\u51B3 <a class="header-anchor" href="#\u51B2\u7A81\u89E3\u51B3">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CCSS Variable \u4F1A\u4EE5 <code>--ant</code> \u4F5C\u4E3A\u524D\u7F00\u3002\u5F53\u4F60\u7684\u9879\u76EE\u4E2D\u5F15\u7528\u591A\u4EFD css \u6587\u4EF6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4FEE\u6539\u524D\u7F00\u7684\u65B9\u5F0F\u907F\u514D\u51B2\u7A81\u3002</p>
<h3 id="\u4EE3\u7801\u8C03\u6574">\u4EE3\u7801\u8C03\u6574 <a class="header-anchor" href="#\u4EE3\u7801\u8C03\u6574">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>\u901A\u8FC7 ConfigProvider \u5728\u9876\u5C42\u4FEE\u6539 <code>prefixCls</code>\uFF1A</p>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-config-provider</span> <span class="token attr-name">prefix-cls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-app</span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-config-provider</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
</code></pre>
<p>\u901A\u8FC7\u9759\u6001\u65B9\u6CD5\u8BBE\u7F6E\u4E3B\u9898\u8272\u4EE5\u53CA\u5BF9\u5E94 <code>prefixCls</code>\uFF1A</p>
<pre class="language-ts" v-pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span>
ConfigProvider<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  prefixCls<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    primaryColor<span class="token operator">:</span> <span class="token string">'#25b864'</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="\u7F16\u8BD1-less">\u7F16\u8BD1 less <a class="header-anchor" href="#\u7F16\u8BD1-less">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>\u7531\u4E8E\u524D\u7F00\u53D8\u66F4\uFF0C\u4F60\u9700\u8981\u91CD\u65B0\u751F\u6210\u4E00\u4EFD\u5BF9\u5E94\u7684 css \u6587\u4EF6\u3002</p>
<pre class="language-bash" v-pre><code>lessc <span class="token parameter variable">--js</span> --modify-var<span class="token operator">=</span><span class="token string">"ant-prefix=custom"</span> ant-design-vue/dist/antd.variable.less modified.css
</code></pre>
<h3 id="\u76F8\u5173\u53D8\u66F4">\u76F8\u5173\u53D8\u66F4 <a class="header-anchor" href="#\u76F8\u5173\u53D8\u66F4">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>\u4E3A\u4E86\u5B9E\u73B0 CSS Variable \u5E76\u4FDD\u6301\u539F\u59CB\u7528\u6CD5\u517C\u5BB9\u6027\uFF0C\u6211\u4EEC\u4E8E <code>dist/antd.xxx.less</code> \u6587\u4EF6\u4E2D\u6DFB\u52A0\u4E86 <code>@root-entry-name: xxx;</code> \u5165\u53E3\u6CE8\u5165\u4EE5\u652F\u6301 less \u52A8\u6001\u52A0\u8F7D\u5BF9\u5E94\u7684 less \u6587\u4EF6\u3002\u4E00\u822C\u60C5\u51B5\u4E0B\uFF0C\u4F60\u4E0D\u9700\u8981\u5173\u6CE8\u8BE5\u53D8\u5316\u3002\u4F46\u662F\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u76F4\u63A5\u5F15\u7528\u4E86 <code>lib|es</code> \u76EE\u5F55\u4E0B\u7684 less \u6587\u4EF6\u3002\u4F60\u9700\u8981\u5728 less \u5165\u53E3\u5904\u914D\u7F6E <code>@root-entry-name: default;</code> \uFF08\u6216\u8005 <code>@root-entry-name: variable;</code>\uFF09\u4EE5\u4F7F less \u53EF\u4EE5\u627E\u5230\u6B63\u786E\u7684\u5165\u53E3\u3002</p>
<p>\u6B64\u5916\uFF0C\u6211\u4EEC\u5C06 <code>lib|es/style/minxins/index.less</code> \u4E2D\u7684 <code>@import 'motion'</code> \u548C <code>@import 'reset'</code> \u8FC1\u79FB\u81F3\u4E86 <code>lib|es/style/themes/xxx.less</code> \u4E2D\uFF0C\u56E0\u4E3A\u8FD9\u4E24\u4E2A\u6587\u4EF6\u4F9D\u8D56\u4E86\u4E3B\u9898\u76F8\u5173\u53D8\u91CF\u3002\u5982\u679C\u4F60\u4F7F\u7528\u4E86\u76F8\u5173\u5185\u90E8\u65B9\u6CD5\uFF0C\u8BF7\u81EA\u884C\u8C03\u6574\u3002\u5F53\u7136\uFF0C\u6211\u4EEC\u8FD8\u662F\u5EFA\u8BAE\u76F4\u63A5\u4F7F\u7528 <code>dist</code> \u76EE\u5F55\u4E0B\u7684 <code>antd.less</code> \u6587\u4EF6\u800C\u975E\u8C03\u7528\u5185\u90E8\u6587\u4EF6\uFF0C\u56E0\u4E3A\u5B83\u4EEC\u7ECF\u5E38\u4F1A\u53D7\u91CD\u6784\u5F71\u54CD\u3002</p>
`,lastUpdated:1748060301808}},p={class:"markdown"};function c(i,n,l,r,d,u){return t(),a("article",p,n[0]||(n[0]=[e(`<p>\u9664\u4E86 <a href="/docs/vue/customize-theme">less \u5B9A\u5236\u4E3B\u9898</a> \u5916\uFF0C\u6211\u4EEC\u8FD8\u63D0\u4F9B\u4E86 CSS Variable \u7248\u672C\u4EE5\u652F\u6301\u52A8\u6001\u5207\u6362\u4E3B\u9898\u80FD\u529B\u3002\u4F60\u53EF\u4EE5\u5728 <a href="/components/config-provider/#components-config-provider-demo-theme">ConfigProvider</a> \u8FDB\u884C\u4F53\u9A8C\u3002</p><h2 id="\u6CE8\u610F\u4E8B\u9879">\u6CE8\u610F\u4E8B\u9879 <a class="header-anchor" href="#\u6CE8\u610F\u4E8B\u9879"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li>\u8BE5\u529F\u80FD\u5728 <code>ant-design-vue@3.1.0-beta.0</code> \u7248\u672C\u8D77\u652F\u6301\u3002</li></ul><h2 id="\u5982\u4F55\u4F7F\u7528">\u5982\u4F55\u4F7F\u7528 <a class="header-anchor" href="#\u5982\u4F55\u4F7F\u7528"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="\u5F15\u5165-antd-variable-min-css">\u5F15\u5165 antd.variable.min.css <a class="header-anchor" href="#\u5F15\u5165-antd-variable-min-css"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u66FF\u6362\u5F53\u524D\u9879\u76EE\u5F15\u5165\u6837\u5F0F\u6587\u4EF6\u4E3A CSS Variable \u7248\u672C\uFF1A</p><pre class="language-diff"><code><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">- import &#39;ant-design-vue/dist/antd.min.css&#39;;
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">+ import &#39;ant-design-vue/dist/antd.variable.min.css&#39;;
</span></span></code></pre><p>\u6CE8\uFF1A\u5982\u679C\u4F60\u4F7F\u7528\u4E86 <code>babel-plugin-import</code>\uFF0C\u9700\u8981\u5C06\u5176\u53BB\u9664\u3002</p><h3 id="\u9759\u6001\u65B9\u6CD5\u914D\u7F6E">\u9759\u6001\u65B9\u6CD5\u914D\u7F6E <a class="header-anchor" href="#\u9759\u6001\u65B9\u6CD5\u914D\u7F6E"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u8C03\u7528 ConfigProvider \u914D\u7F6E\u65B9\u6CD5\u8BBE\u7F6E\u4E3B\u9898\u8272\uFF1A</p><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>

ConfigProvider<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    primaryColor<span class="token operator">:</span> <span class="token string">&#39;#25b864&#39;</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><h2 id="\u51B2\u7A81\u89E3\u51B3">\u51B2\u7A81\u89E3\u51B3 <a class="header-anchor" href="#\u51B2\u7A81\u89E3\u51B3"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0CCSS Variable \u4F1A\u4EE5 <code>--ant</code> \u4F5C\u4E3A\u524D\u7F00\u3002\u5F53\u4F60\u7684\u9879\u76EE\u4E2D\u5F15\u7528\u591A\u4EFD css \u6587\u4EF6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4FEE\u6539\u524D\u7F00\u7684\u65B9\u5F0F\u907F\u514D\u51B2\u7A81\u3002</p><h3 id="\u4EE3\u7801\u8C03\u6574">\u4EE3\u7801\u8C03\u6574 <a class="header-anchor" href="#\u4EE3\u7801\u8C03\u6574"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u901A\u8FC7 ConfigProvider \u5728\u9876\u5C42\u4FEE\u6539 <code>prefixCls</code>\uFF1A</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-config-provider</span> <span class="token attr-name">prefix-cls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>custom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-app</span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-config-provider</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>\u901A\u8FC7\u9759\u6001\u65B9\u6CD5\u8BBE\u7F6E\u4E3B\u9898\u8272\u4EE5\u53CA\u5BF9\u5E94 <code>prefixCls</code>\uFF1A</p><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ConfigProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;ant-design-vue&#39;</span><span class="token punctuation">;</span>
ConfigProvider<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  prefixCls<span class="token operator">:</span> <span class="token string">&#39;custom&#39;</span><span class="token punctuation">,</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    primaryColor<span class="token operator">:</span> <span class="token string">&#39;#25b864&#39;</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="\u7F16\u8BD1-less">\u7F16\u8BD1 less <a class="header-anchor" href="#\u7F16\u8BD1-less"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u7531\u4E8E\u524D\u7F00\u53D8\u66F4\uFF0C\u4F60\u9700\u8981\u91CD\u65B0\u751F\u6210\u4E00\u4EFD\u5BF9\u5E94\u7684 css \u6587\u4EF6\u3002</p><pre class="language-bash"><code>lessc <span class="token parameter variable">--js</span> --modify-var<span class="token operator">=</span><span class="token string">&quot;ant-prefix=custom&quot;</span> ant-design-vue/dist/antd.variable.less modified.css
</code></pre><h3 id="\u76F8\u5173\u53D8\u66F4">\u76F8\u5173\u53D8\u66F4 <a class="header-anchor" href="#\u76F8\u5173\u53D8\u66F4"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u4E3A\u4E86\u5B9E\u73B0 CSS Variable \u5E76\u4FDD\u6301\u539F\u59CB\u7528\u6CD5\u517C\u5BB9\u6027\uFF0C\u6211\u4EEC\u4E8E <code>dist/antd.xxx.less</code> \u6587\u4EF6\u4E2D\u6DFB\u52A0\u4E86 <code>@root-entry-name: xxx;</code> \u5165\u53E3\u6CE8\u5165\u4EE5\u652F\u6301 less \u52A8\u6001\u52A0\u8F7D\u5BF9\u5E94\u7684 less \u6587\u4EF6\u3002\u4E00\u822C\u60C5\u51B5\u4E0B\uFF0C\u4F60\u4E0D\u9700\u8981\u5173\u6CE8\u8BE5\u53D8\u5316\u3002\u4F46\u662F\uFF0C\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u76F4\u63A5\u5F15\u7528\u4E86 <code>lib|es</code> \u76EE\u5F55\u4E0B\u7684 less \u6587\u4EF6\u3002\u4F60\u9700\u8981\u5728 less \u5165\u53E3\u5904\u914D\u7F6E <code>@root-entry-name: default;</code> \uFF08\u6216\u8005 <code>@root-entry-name: variable;</code>\uFF09\u4EE5\u4F7F less \u53EF\u4EE5\u627E\u5230\u6B63\u786E\u7684\u5165\u53E3\u3002</p><p>\u6B64\u5916\uFF0C\u6211\u4EEC\u5C06 <code>lib|es/style/minxins/index.less</code> \u4E2D\u7684 <code>@import &#39;motion&#39;</code> \u548C <code>@import &#39;reset&#39;</code> \u8FC1\u79FB\u81F3\u4E86 <code>lib|es/style/themes/xxx.less</code> \u4E2D\uFF0C\u56E0\u4E3A\u8FD9\u4E24\u4E2A\u6587\u4EF6\u4F9D\u8D56\u4E86\u4E3B\u9898\u76F8\u5173\u53D8\u91CF\u3002\u5982\u679C\u4F60\u4F7F\u7528\u4E86\u76F8\u5173\u5185\u90E8\u65B9\u6CD5\uFF0C\u8BF7\u81EA\u884C\u8C03\u6574\u3002\u5F53\u7136\uFF0C\u6211\u4EEC\u8FD8\u662F\u5EFA\u8BAE\u76F4\u63A5\u4F7F\u7528 <code>dist</code> \u76EE\u5F55\u4E0B\u7684 <code>antd.less</code> \u6587\u4EF6\u800C\u975E\u8C03\u7528\u5185\u90E8\u6587\u4EF6\uFF0C\u56E0\u4E3A\u5B83\u4EEC\u7ECF\u5E38\u4F1A\u53D7\u91CD\u6784\u5F71\u54CD\u3002</p>`,24)]))}const h=s(o,[["render",c]]);export{h as default};