| 1 |
- import{c as t,o as s,A as o}from"./vendor.80bf15c7.js";const n={class:"markdown-body"},u=o('<h1>主题定制</h1><blockquote><p>定制主题须使用 NutUI 2.0 以上版本</p></blockquote><p>NutUI 默认提供一套 UI 主题，同时允许在一定程度上定制新的主题，以满足业务的多样化视觉需求。</p><p><img src="http://img14.360buyimg.com/uba/jfs/t1/14893/39/4803/92712/5c3478afEc0458edb/54e06165a4445661.png" alt="主题定制"></p><h2>样式变量</h2><p>NutUI 的样式是基于 <strong><a href="https://sass-lang.com/">SCSS</a></strong> 开发的，定义了一套默认样式变量，定制主题就是编辑这个变量列表。</p><p>以下是一些与颜色相关基本样式变量，所有可用的变量请参考配置文件。</p><pre><code class="language-scss">$primary-color: #F0250F;\n$normal-color: #848484;\n$link-color: $primary-color;\n$link-hover-color: mix($link-color , #000, 80%);\n$title-color: #2D2D2D;\n$text-color: #848484;\n$light-color: #F6F6F6;\n$dark-color: #DADADA;\n</code></pre><h2>定制主题</h2><h3>第一步：新建自定义变量 SCSS 文件</h3><p>在本地项目中新建一个 <strong>SCSS</strong> 文件，包含上述变量，自定义变量值。</p><h3>第二步：修改本地项目 webpack 的配置文件</h3><p>修改 webpack 配置文件中 <strong>sass-loader</strong> 的配置。在 <strong>options</strong> 的 <strong>data</strong> 属性值中，先后 import 你自定义的 SCSS 文件（如 <code>custom.scss</code>）和 NutUI 的样式变量配置文件（路径为 <strong>dist/styles/variable.scss</strong>）。</p><pre><code class="language-javascript">{\n test: /\\.(sa|sc)ss$/,\n use: [\n {\n loader: 'sass-loader',\n options: {\n data: `@import "./asset/css/custom.scss"; @import "@nutui/nutui/dist/styles/index.scss"; `,\n }\n }\n ]\n}\n</code></pre><p>如果你的项目使用的是VueCLI 3以上版本 请修改 <code>vue.config.js</code> 进行配置</p><pre><code class="language-bash">module.exports = {\n css: {\n loaderOptions: {\n // 给 sass-loader 传递选项\n scss: {\n // @/ 是 src/ 的别名\n // 注意：在 sass-loader v7 中，这个选项名是 "data"\n prependData: ` \n @import "@/assets/custom_theme.scss";\n @import "@nutui/nutui/dist/styles/index.scss";\n `,\n }\n },\n }\n}\n</code></pre><h3>第三步：引用组件样式时引用 SCSS 文件</h3><p>在主题定制场景下，项目中引用组件时，需要引入 <strong>SCSS</strong> 文件，而不是 <strong>CSS</strong> 文件。分三种情况：</p><p>1.引用完整组件库时，需要引入 <strong>nutui.scss</strong> 文件</p><pre><code class="language-javascript">import NutUI from '@nutui/nutui';\nimport '@nutui/nutui/dist/nutui.scss';\n</code></pre><p>2.未使用插件，手动按需引用组件时，需手动引入组件对应的 SCSS 文件。</p><pre><code class="language-javascript">import Button from '@nutui/nutui/dist/packages/button/button.js';\nimport '@nutui/nutui/dist/packages/button/button.scss';\n</code></pre><p>3.使用了插件 <strong><a href="https://www.npmjs.com/package/@nutui/babel-plugin-separate-import">@nutui/babel-plugin-separate-import</a></strong> 进行按需引用时，需修改babel的配置文件（如.babelrc），将 <strong>style</strong> 的设置为 <strong>scss</strong>。该插件将会自动引入指定组件对应的 SCSS 文件。</p><pre><code class="language-bash">{\n "plugins": [\n ["@nutui/babel-plugin-separate-import", {\n "libraryName": "@nutui/nutui",\n "libraryDirectory": "dist/packages",\n "style": "scss"\n }]\n ]\n}\n</code></pre><blockquote><p>VueCLI 3 相关Demo 请查看 <a href="https://github.com/jdf2e/nutui-demo">NutUI Demo</a></p></blockquote>',25),e={expose:[],setup:o=>(o,e)=>(s(),t("div",n,[u]))};export default e;
|
