| 1 |
- System.register(["./vendor-legacy.7e726cf7.js"],(function(s){"use strict";var a,n,t;return{setters:[function(s){a=s.e,n=s.o,t=s.G}],execute:function(){const p={class:"markdown-body"},e=[t('<h1>主题定制</h1><p>NutUI 默认提供一套 UI 主题，同时允许在一定程度上定制新的主题，以满足业务的多样化视觉需求。</p><br><img src="https://img12.360buyimg.com/imagetools/jfs/t1/157759/16/13989/142151/6052efc7Ef8f4bff4/f3dd6422949ba4b7.jpg" width="700" alt="NutUI 主题定制"><h2>样式变量</h2><p>NutUI 的样式是基于 <strong><a href="https://sass-lang.com/">SCSS</a></strong> 开发的，定义了一套默认样式变量，定制主题就是编辑这个变量列表。</p><blockquote><p>现阶段需要开发者手动配置，可视化生成配置目前正在开发中。</p></blockquote><p>以下是一些与颜色相关基本样式变量，所有可用的变量请参考<a href="https://github.com/jdf2e/nutui/blob/next/src/packages/styles/variables.scss">配置文件 variables.scss</a>。</p><pre><code class="language-scss"><span class="hljs-comment">// 主色调</span>\n<span class="hljs-variable">$primary-color</span>: <span class="hljs-number">#fa2c19</span>;\n<span class="hljs-variable">$primary-color-end</span>: <span class="hljs-number">#fa6419</span>;\n...\n</code></pre><blockquote><p>在主题定制场景下，项目中引用组件时，需要引入 <strong>SCSS</strong> 文件，而不是 <strong>CSS</strong> 文件。</p></blockquote><p>需要引入 <strong>nutui.scss</strong> 文件</p><pre><code class="language-javascript"><span class="hljs-keyword">import</span> NutUI <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-keyword">import</span> <span class="hljs-string">"@nutui/nutui/dist/styles/themes/default.scss"</span>;\n</code></pre><h2>定制主题</h2><h3>第一步：新建自定义变量 SCSS 文件</h3><p>在本地项目中新建一个 <strong>SCSS</strong> 文件 <code>custom_theme.scss</code>，自定义变量值。</p><pre><code class="language-scss"><span class="hljs-variable">$primary-color</span>: <span class="hljs-number">#478EF2</span>;\n<span class="hljs-variable">$primary-color-end</span>: <span class="hljs-number">#496AF2</span>;\n</code></pre><h3>第二步：修改本地项目 webpack 或者 vite 的配置文件</h3><p>修改 vite 或者 webpack 配置文件中 <strong>sass-loader</strong> 的配置。如下示例</p><h4>vite 演示</h4><pre><code class="language-javascript"><span class="hljs-comment">// https://vitejs.dev/config/</span>\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> defineConfig({\n <span class="hljs-comment">//...</span>\n <span class="hljs-attr">css</span>: {\n <span class="hljs-attr">preprocessorOptions</span>: {\n <span class="hljs-attr">scss</span>: {\n <span class="hljs-attr">additionalData</span>: <span class="hljs-string">`@import "./assets/custom_theme.scss";`</span>\n }\n }\n }\n})\n</code></pre><h4>vue/cli 2版本</h4><pre><code class="language-javascript">{\n <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\\.(sa|sc)ss$/</span>,\n use: [\n {\n <span class="hljs-attr">loader</span>: <span class="hljs-string">'sass-loader'</span>,\n <span class="hljs-attr">options</span>: {\n <span class="hljs-attr">data</span>: <span class="hljs-string">`@import "./assets/custom_theme.scss";`</span>,\n }\n }\n ]\n}\n</code></pre><h4>vue/cli 3 以上版本修改 <strong>vue.config.js</strong> 进行配置</h4><pre><code class="language-javascript"><span class="hljs-built_in">module</span>.exports = {\n <span class="hljs-attr">css</span>: {\n <span class="hljs-attr">loaderOptions</span>: {\n <span class="hljs-comment">// 给 sass-loader 传递选项</span>\n <span class="hljs-attr">scss</span>: {\n <span class="hljs-comment">// @/ 是 src/ 的别名</span>\n <span class="hljs-comment">// 注意：在 sass-loader v7 中，这个选项名是 "data"</span>\n <span class="hljs-attr">prependData</span>: <span class="hljs-string">`@import "@/assets/custom_theme.scss";`</span>,\n }\n },\n }\n}\n</code></pre><blockquote><p>@nutui/nutui 多种模式（vite 、vue/cli、cdn、ts）使用示例 <a href="https://github.com/jdf2e/nutui-demo">Demo</a></p></blockquote>',25)];s("default",{setup:(s,{expose:t})=>(t({frontmatter:{}}),(s,t)=>(n(),a("div",p,e)))})}}}));
|
