Browse Source

docs: theme intro

richard1015 4 years ago
parent
commit
ddee7e8c8d
2 changed files with 16 additions and 10 deletions
  1. 1 1
      src/docs/intro.md
  2. 15 9
      src/docs/theme.md

+ 1 - 1
src/docs/intro.md

@@ -20,7 +20,7 @@ NutUI 是一套京东风格的 Vue 移动端组件库,开发和服务于移动
 * 详尽的文档和示例
 * 支持 TypeScript
 * 支持服务端渲染(测试阶段)
-* 支持定制主题(3.0 开发中)
+* 支持定制主题
 * 单元测试覆盖(3.0 开发中)
 
 ## 示例

+ 15 - 9
src/docs/theme.md

@@ -29,20 +29,24 @@ $primary-color-end: #fa6419;
 
 ```javascript
 import NutUI from '@nutui/nutui';
-import '@nutui/nutui/dist/nutui.scss';
+import "@nutui/nutui/dist/styles/themes/default.scss";
 ```
 
 ## 定制主题
 
 ### 第一步:新建自定义变量 SCSS 文件
 
-在本地项目中新建一个 **SCSS** 文件,包含上述变量,自定义变量值。
+在本地项目中新建一个 **SCSS** 文件 `custom_theme.scss`,自定义变量值。
 
-### 第二步:修改本地项目 webpack 或者 vite 的配置文件
+``` scss
+$primary-color: #478EF2;
+$primary-color-end: #496AF2;
+```
 
-修改 webpack 配置文件中 **sass-loader** 的配置。在 **options** 的 **data** 属性值中,先后 import 你自定义的 SCSS 文件(如 `custom.scss`)和 NutUI 的样式变量配置文件(路径为 **dist/styles/variable.scss**)。
+### 第二步:修改本地项目 webpack 或者 vite 的配置文件
 
-#### vite 版本
+修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例
+#### vite 演示
 
 ``` javascript
 // https://vitejs.dev/config/
@@ -51,7 +55,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@import "./asset/css/custom.scss";@import "@nutui/nutui/dist/styles/variables.scss";`
+        additionalData: `@import "./assets/custom_theme.scss";`
       }
     }
   }
@@ -67,7 +71,7 @@ export default defineConfig({
         {
             loader: 'sass-loader',
             options: {
-                data: `@import "./asset/css/custom.scss";@import "@nutui/nutui/dist/styles/variables.scss";`,
+                data: `@import "./assets/custom_theme.scss";`,
             }
         }
     ]
@@ -84,9 +88,11 @@ module.exports = {
             scss: {
                 // @/ 是 src/ 的别名
                 // 注意:在 sass-loader v7 中,这个选项名是 "data"
-                prependData: `@import "@/assets/custom_theme.scss";@import "@nutui/nutui/dist/styles/variables.scss";`,
+                prependData: `@import "@/assets/custom_theme.scss";`,
             }
         },
     }
 }
-```
+```
+
+> @nutui/nutui 多种模式(vite 、vue/cli、cdn、ts)使用示例 [Demo](https://github.com/jdf2e/nutui-demo)