diff --git a/package.json b/package.json
index 39662211ab..b0971e1046 100644
--- a/package.json
+++ b/package.json
@@ -7,11 +7,11 @@
   "typings": "dist/es/packages/nutui.react.build.d.ts",
   "sideEffects": [
     "*.scss",
-    "dist/es/**/style/*",
-    "dist/cjs/**/style/*",
-    "dist/style.css",
-    "dist/styles/font/*",
-    "dist/styles/font-jmapp/*"
+    "dist/es/**/style{,-jmapp,-jrkf}/*",
+    "dist/cjs/**/style{,-jmapp,-jrkf}/*",
+    "dist/style{,-jmapp,-jrkf}.css",
+    "dist/styles/**/*",
+    "dist/styles/font{,-jmapp,-jrkf}/*"
   ],
   "description": "京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序",
   "keywords": [
diff --git a/packages/nutui-templates/create-app-demo/craco.config.js b/packages/nutui-templates/create-app-demo/craco.config.js
index 7bc499b503..c9bba98a5d 100644
--- a/packages/nutui-templates/create-app-demo/craco.config.js
+++ b/packages/nutui-templates/create-app-demo/craco.config.js
@@ -1,16 +1,44 @@
 module.exports = {
+  webpack: {
+    module: {
+      rules: [
+        {
+          test: /\.s[ac]ss$/i,
+          use: [
+            'style-loader',
+            'css-loader',
+            {
+              loader: "sass-loader",
+              options: {
+                additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`
+                // JDesign 主题
+                // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';`
+                // JRKF 主题
+                // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';`
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
   babel: {
     plugins: [
       [
-        "import",
+        'import',
         {
-          "libraryName": "@nutui/nutui-react",
-          "libraryDirectory": "dist/esm",
-          "style": "css",
-          "camel2DashComponentName": false
+          libraryName: '@nutui/nutui-react',
+          camel2DashComponentName: false,
+          customName: (name, file) => {
+            return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}`
+          },
+          // 自动加载 scss 样式文件
+          customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
+          // 自动加载 css 样式文件
+          // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
         },
-        "nutui-react"
-      ]
+        'nutui-react',
+      ],
     ]
   },
 };
\ No newline at end of file
diff --git a/packages/nutui-templates/create-app-demo/package.json b/packages/nutui-templates/create-app-demo/package.json
index e3cf32e80d..4846c06864 100644
--- a/packages/nutui-templates/create-app-demo/package.json
+++ b/packages/nutui-templates/create-app-demo/package.json
@@ -19,10 +19,6 @@
     "test": "craco build"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
   },
   "browserslist": {
     "production": [
diff --git a/packages/nutui-templates/create-app-demo/src/App.js b/packages/nutui-templates/create-app-demo/src/App.js
index 0578be8fb5..9522577aa5 100644
--- a/packages/nutui-templates/create-app-demo/src/App.js
+++ b/packages/nutui-templates/create-app-demo/src/App.js
@@ -1,4 +1,7 @@
 import React from 'react'
+import '@nutui/nutui-react/dist/styles/themes/default.css'
+// import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
 import './App.css'
 import { Star } from '@nutui/icons-react'
 import { Row, Col, Image, Button } from '@nutui/nutui-react'
diff --git a/packages/nutui-templates/vite-demo/package.json b/packages/nutui-templates/vite-demo/package.json
index 1409cdf362..220dd288ec 100644
--- a/packages/nutui-templates/vite-demo/package.json
+++ b/packages/nutui-templates/vite-demo/package.json
@@ -20,12 +20,13 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "sass-embedded": "^1.86.3",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5",
     "vite-plugin-imp": "^2.4.0"
   }
 }
\ No newline at end of file
diff --git a/packages/nutui-templates/vite-demo/src/App.tsx b/packages/nutui-templates/vite-demo/src/App.tsx
index ee01084733..2379c0fa95 100644
--- a/packages/nutui-templates/vite-demo/src/App.tsx
+++ b/packages/nutui-templates/vite-demo/src/App.tsx
@@ -1,6 +1,9 @@
 import './App.css'
 import { Star } from '@nutui/icons-react'
 import { Row, Col, Image, Button } from '@nutui/nutui-react'
+import '@nutui/nutui-react/dist/styles/themes/default.css'
+// import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
 
 const Home = () => {
   return (
diff --git a/packages/nutui-templates/vite-demo/vite.config.ts b/packages/nutui-templates/vite-demo/vite.config.ts
index 0e812fa004..ddfe10feef 100644
--- a/packages/nutui-templates/vite-demo/vite.config.ts
+++ b/packages/nutui-templates/vite-demo/vite.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import vitePluginImp from 'vite-plugin-imp'
+import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,12 +11,24 @@ export default defineConfig({
         {
           libName: '@nutui/nutui-react',
           style: (name) => {
-            return `@nutui/nutui-react/dist/esm/${name}/style/css`
+            return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/index`
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/index`
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/index`
           },
           replaceOldImport: false,
           camel2DashComponentName: false,
-        }
-      ]
-    })
+        },
+      ],
+    }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler', // 或 "modern"，"legacy"
+        additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`
+        // jmapp 需要在 app 入口引入 import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+        // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';`
+      }
+    }
+  },
 })
diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs
index 89d9d7d315..17489af0d4 100644
--- a/scripts/build-taro.mjs
+++ b/scripts/build-taro.mjs
@@ -244,26 +244,28 @@ async function buildUMD() {
   })
 }
 
-async function buildAllCSS() {
+// 针对不同主题构建全量的 style
+async function buildAllCSS(themeName = '') {
   // 拷贝styles
+  const themeStylePath = themeName ? `style-${themeName}` : 'style'
   async function generateAllStyles() {
-    const projectID = process.env.VITE_APP_PROJECT_ID
     const content = [
-      `@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`,
+      `@import './styles/variables${themeName ? `-${themeName}` : ''}.scss';`,
       `@import './styles/mixins/index.scss';`,
       `@import './styles/animation/index.scss';`,
     ]
-    const scssFiles = await glob([`${dist}/es/packages/**/*.scss`])
+    const scssFiles = await glob([`${dist}/es/packages/**/${themeStylePath}/*.scss`])
     scssFiles.forEach((file) => {
       content.push(
-        `@import '${relativePath('/' + file, `/${dist}/style.scss`)}';`,
+        `@import '${relativePath('/' + file, `/${dist}/${themeStylePath}.scss`)}';`,
       )
     })
-    dest(`${dist}/style.scss`, content.join('\n'))
+    await dest(`${dist}/${themeStylePath}.scss`, content.join('\n'))
   }
 
   await generateAllStyles()
   await vite.build({
+    configFile: false,
     logLevel: 'error',
     resolve: {
       alias: [{ find: '@', replacement: resolve(__dirname, '../src') }],
@@ -272,11 +274,16 @@ async function buildAllCSS() {
       emptyOutDir: false,
       outDir: dist,
       lib: {
-        entry: `./${dist}/style.scss`,
+        entry: `./${dist}/${themeStylePath}.scss`,
         formats: ['es'],
         name: 'style',
         fileName: 'style',
       },
+      rollupOptions: {
+        output: {
+          assetFileNames: `${themeStylePath}.css`, // 资源文件名
+        }
+      }
     },
   })
 }
@@ -287,6 +294,11 @@ async function buildThemeCSS() {
   })
   const projectID = process.env.VITE_APP_PROJECT_ID
   const inputFiles = {}
+  // nuitui 官方包包含全部主题文件，包括：
+  // default.css 默认明亮主题
+  // dark.css 默认暗黑主题
+  // jmapp.css、jrkf.css 主题
+  // 例如：jmapp 包只包含 jmapp 的主题文件，且是默认主题文件。
   files.forEach(filePath => {
     const themeName = basename(filePath, 'scss').replace('theme-', '')
     if (!projectID) {
@@ -331,16 +343,16 @@ async function copyStyles() {
 }
 
 // 构建样式
-async function buildCSS(p) {
-  const cssFiles = await glob(['src/packages/**/*.scss'], {
+async function buildCSS(themeName = '') {
+  const componentScssFiles = await glob(['src/packages/**/*.scss'], {
     ignore: ['src/packages/**/demo.scss'],
   })
 
   const variables = await readFile(
-    join(__dirname, '../src/styles/variables.scss'),
+    join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`),
   )
-  for (const file of cssFiles) {
-    const button = await readFile(join(__dirname, '../', file), {
+  for (const file of componentScssFiles) {
+    const scssContent = await readFile(join(__dirname, '../', file), {
       encoding: 'utf8',
     })
     // countup 是特例
@@ -350,30 +362,11 @@ async function buildCSS(p) {
       '../src/packages',
       base.replace('.scss', ''),
     )
-    const code = sass.compileString(variables + '\n' + button, {
-      loadPaths: [loadPath],
-    })
     const cssPath = relative('src', loadPath)
-    // 写 css 文件
-    await dest(join(`${dist}/es`, cssPath, 'style/style.css'), code.css)
-    await dest(join(`${dist}/es`, cssPath, 'style/css.js'), `import './style.css'`)
-
-    await dest(join(`${dist}/cjs`, cssPath, 'style/style.css'), code.css)
-    await dest(
-      join(`${dist}/cjs`, cssPath, 'style/css.js'),
-      `import './style.css'`,
-    )
-
-    // copy harmonycss
-    if (file.indexOf('countup') === -1) {
-      await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/cjs`, cssPath, 'style/style.harmony.css'))
-      await copy(join(__dirname, '../', file.replace('scss', 'harmony.css')), join(`${dist}/es`, cssPath, 'style/style.harmony.css'))
-    }
-
     // 删除 import
     // 写入 style.scss
     const atRules = []
-    await postcss([
+    const postcssRes = await postcss([
       {
         postcssPlugin: 'remove-atrule',
         AtRule(root) {
@@ -391,13 +384,22 @@ async function buildCSS(p) {
         },
       },
     ])
-      .process(button, { from: loadPath, syntax: scss })
+      .process(scssContent, { from: loadPath, syntax: scss })
       .then((result) => {
-        dest(join(`${dist}/es`, cssPath, `style/${base}`), result.css)
-        dest(join(`${dist}/cjs`, cssPath, `style/${base}`), result.css)
+        return result
       })
+    const themeDir = themeName ? `style-${themeName}` : 'style'
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/${base}`), postcssRes.css)
+    await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/${base}`), postcssRes.css)
+
+    const code = sass.compileString(variables + '\n' + postcssRes.css.replaceAll('../../../../', '../../'), {
+      loadPaths: [loadPath],
+    })
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/style.css`), code.css)
+    await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/style.css`), code.css)
 
     const jsContent = []
+    const cssContent = []
     atRules.forEach((rule) => {
       rule = rule.replaceAll('\'', '')
       if (rule.indexOf('../styles/') > -1) {
@@ -407,18 +409,33 @@ async function buildCSS(p) {
         const base = basename(rule)
         const ext = extname(base)
         const name = base.replace(ext, '')
-        jsContent.push(`import '../../${name}/style';`)
+        jsContent.push(`import '../../${name}/${themeDir}';`)
+        cssContent.push(`import '../../${name}/${themeDir}/css';`)
       }
     })
     jsContent.push(`import './${base}';`)
+    cssContent.push(`import './style.css';`)
 
     await dest(
-      join(`${dist}/cjs`, cssPath, `style/index.js`),
+      join(`${dist}/cjs`, cssPath, `${themeDir}/index.js`),
       jsContent.join('\n'),
     )
-    await dest(join(`${dist}/es`, cssPath, `style/index.js`), jsContent.join('\n'))
-  }
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/index.js`), jsContent.join('\n'))
+
+    // 写 css 文件
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/css.js`), cssContent.join('\n'))
+    await dest(
+      join(`${dist}/cjs`, cssPath, `${themeDir}/css.js`),
+      cssContent.join('\n'),
+    )
 
+    // copy harmonycss
+    if (file.indexOf('countup') === -1) {
+      const harmonyCss = join(__dirname, '../', file.replace('scss', 'harmony.css'))
+      await copy(harmonyCss, join(`${dist}/cjs`, cssPath, 'style/style.harmony.css'))
+      await copy(harmonyCss, join(`${dist}/es`, cssPath, 'style/style.harmony.css'))
+    }
+  }
 }
 
 function generateReleasePackageJson() {
@@ -474,18 +491,36 @@ console.time('build UMD')
 await buildUMD()
 console.timeEnd('build UMD')
 
-console.time('Build CSS')
-await buildCSS()
-console.timeEnd('Build CSS')
 
 console.time('Copy Styles')
 await copyStyles()
 console.timeEnd('Copy Styles')
 
+console.time('Build CSS')
+await buildCSS()
+console.timeEnd('Build CSS')
+
+console.time('Build jmapp CSS')
+await buildCSS('jmapp')
+console.timeEnd('Build jmapp CSS')
+
+console.time('Build jrkf CSS')
+await buildCSS('jrkf')
+console.timeEnd('Build jrkf CSS')
+
 console.time('Build All CSS')
 await buildAllCSS()
 console.timeEnd('Build All CSS')
 
+console.time('Build All jrkf CSS')
+await buildAllCSS('jrkf')
+console.timeEnd('Build All jrkf CSS')
+
+console.time('Build All jmapp CSS')
+await buildAllCSS('jmapp')
+console.timeEnd('Build All jmapp CSS')
+
+
 console.time('Build Theme CSS')
 await buildThemeCSS()
 console.timeEnd('Build Theme CSS')
diff --git a/scripts/build.mjs b/scripts/build.mjs
index 0438893949..947f1d11bd 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -192,27 +192,29 @@ async function buildUMD(p) {
     },
   })
 }
-// 针对不同包构建全量的 style
-async function buildAllCSS() {
+
+// 针对不同主题构建全量的 style
+async function buildAllCSS(themeName = '') {
   // 拷贝styles
+  const themeStylePath = themeName ? `style-${themeName}` : 'style'
   async function generateAllStyles() {
-    const projectID = process.env.VITE_APP_PROJECT_ID
     const content = [
-      `@import './styles/variables${projectID ? `-${projectID}` : ''}.scss';`,
+      `@import './styles/variables${themeName ? `-${themeName}` : ''}.scss';`,
       `@import './styles/mixins/index.scss';`,
       `@import './styles/animation/index.scss';`,
     ]
-    const scssFiles = await glob([`${dist}/es/packages/**/*.scss`])
+    const scssFiles = await glob([`${dist}/es/packages/**/${themeStylePath}/*.scss`])
     scssFiles.forEach((file) => {
       content.push(
-        `@import '${relativePath('/' + file, `/${dist}/style.scss`)}';`,
+        `@import '${relativePath('/' + file, `/${dist}/${themeStylePath}.scss`)}';`,
       )
     })
-    dest(`${dist}/style.scss`, content.join('\n'))
+    await dest(`${dist}/${themeStylePath}.scss`, content.join('\n'))
   }
 
   await generateAllStyles()
   await vite.build({
+    configFile: false,
     logLevel: 'error',
     resolve: {
       alias: [{ find: '@', replacement: resolve(__dirname, '../src') }],
@@ -221,11 +223,16 @@ async function buildAllCSS() {
       emptyOutDir: false,
       outDir: dist,
       lib: {
-        entry: `./${dist}/style.scss`,
+        entry: `./${dist}/${themeStylePath}.scss`,
         formats: ['es'],
         name: 'style',
         fileName: 'style',
       },
+      rollupOptions: {
+        output: {
+          assetFileNames: `${themeStylePath}.css`, // 资源文件名
+        }
+      }
     },
   })
 }
@@ -276,6 +283,7 @@ async function buildThemeCSS() {
   })
 }
 
+// 拷贝styles
 async function copyStyles() {
   await copy(
     resolve(__dirname, '../src/styles'),
@@ -284,16 +292,16 @@ async function copyStyles() {
 }
 
 // 构建样式
-async function buildCSS(p) {
-  const cssFiles = await glob(['src/packages/**/*.scss'], {
+async function buildCSS(themeName = '') {
+  const componentScssFiles = await glob(['src/packages/**/*.scss'], {
     ignore: ['src/packages/**/demo.scss'],
   })
 
   const variables = await readFile(
-    join(__dirname, '../src/styles/variables.scss'),
+    join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`),
   )
-  for (const file of cssFiles) {
-    const button = await readFile(join(__dirname, '../', file), {
+  for (const file of componentScssFiles) {
+    const scssContent = await readFile(join(__dirname, '../', file), {
       encoding: 'utf8',
     })
     // countup 是特例
@@ -303,24 +311,11 @@ async function buildCSS(p) {
       '../src/packages',
       base.replace('.scss', ''),
     )
-    const code = sass.compileString(variables + '\n' + button, {
-      loadPaths: [loadPath],
-    })
     const cssPath = relative('src', loadPath)
-    // 写 css 文件
-    await dest(join(`${dist}/es`, cssPath, 'style/style.css'), code.css)
-    await dest(join(`${dist}/es`, cssPath, 'style/css.js'), `import './style.css'`)
-
-    await dest(join(`${dist}/cjs`, cssPath, 'style/style.css'), code.css)
-    await dest(
-      join(`${dist}/cjs`, cssPath, 'style/css.js'),
-      `import './style.css'`,
-    )
-
     // 删除 import
     // 写入 style.scss
     const atRules = []
-    await postcss([
+    const postcssRes = await postcss([
       {
         postcssPlugin: 'remove-atrule',
         AtRule(root) {
@@ -338,13 +333,22 @@ async function buildCSS(p) {
         },
       },
     ])
-      .process(button, { from: loadPath, syntax: scss })
+      .process(scssContent, { from: loadPath, syntax: scss })
       .then((result) => {
-        dest(join(`${dist}/es`, cssPath, `style/${base}`), result.css)
-        dest(join(`${dist}/cjs`, cssPath, `style/${base}`), result.css)
+        return result
       })
+    const themeDir = themeName ? `style-${themeName}` : 'style'
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/${base}`), postcssRes.css)
+    await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/${base}`), postcssRes.css)
+
+    const code = sass.compileString(variables + '\n' + postcssRes.css.replaceAll('../../../../', '../../'), {
+      loadPaths: [loadPath],
+    })
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/style.css`), code.css)
+    await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/style.css`), code.css)
 
     const jsContent = []
+    const cssContent = []
     atRules.forEach((rule) => {
       rule = rule.replaceAll('\'', '')
       if (rule.indexOf('../styles/') > -1) {
@@ -354,16 +358,25 @@ async function buildCSS(p) {
         const base = basename(rule)
         const ext = extname(base)
         const name = base.replace(ext, '')
-        jsContent.push(`import '../../${name}/style';`)
+        jsContent.push(`import '../../${name}/${themeDir}';`)
+        cssContent.push(`import '../../${name}/${themeDir}/css';`)
       }
     })
     jsContent.push(`import './${base}';`)
+    cssContent.push(`import './style.css';`)
 
     await dest(
-      join(`${dist}/cjs`, cssPath, `style/index.js`),
+      join(`${dist}/cjs`, cssPath, `${themeDir}/index.js`),
       jsContent.join('\n'),
     )
-    await dest(join(`${dist}/es`, cssPath, `style/index.js`), jsContent.join('\n'))
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/index.js`), jsContent.join('\n'))
+
+    // 写 css 文件
+    await dest(join(`${dist}/es`, cssPath, `${themeDir}/css.js`), cssContent.join('\n'))
+    await dest(
+      join(`${dist}/cjs`, cssPath, `${themeDir}/css.js`),
+      cssContent.join('\n'),
+    )
   }
 }
 
@@ -420,18 +433,36 @@ console.time('build UMD')
 await buildUMD()
 console.timeEnd('build UMD')
 
-console.time('Build CSS')
-await buildCSS()
-console.timeEnd('Build CSS')
 
 console.time('Copy Styles')
 await copyStyles()
 console.timeEnd('Copy Styles')
 
+console.time('Build CSS')
+await buildCSS()
+console.timeEnd('Build CSS')
+
+console.time('Build jmapp CSS')
+await buildCSS('jmapp')
+console.timeEnd('Build jmapp CSS')
+
+console.time('Build jrkf CSS')
+await buildCSS('jrkf')
+console.timeEnd('Build jrkf CSS')
+
 console.time('Build All CSS')
 await buildAllCSS()
 console.timeEnd('Build All CSS')
 
+console.time('Build All jmapp CSS')
+await buildAllCSS('jmapp')
+console.timeEnd('Build All jmapp CSS')
+
+console.time('Build All jrkf CSS')
+await buildAllCSS('jrkf')
+console.timeEnd('Build All jrkf CSS')
+
+
 console.time('Build Theme CSS')
 await buildThemeCSS()
 console.timeEnd('Build Theme CSS')
diff --git a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md
index fc315e5dac..bfa9659d72 100644
--- a/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md
+++ b/src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md
@@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing
 | theme description | scss file name |
 | --- | --- |
 | Jingdong APP 10.0 theme (default) | `variables.scss` |
-| Jingdong JDesign Theme | `variables-jdb.scss ` |
+| Jingdong JMAPP Theme | `variables-jmapp.scss ` |
 
 ## How to use
 
@@ -19,56 +19,7 @@ It is important to note that when configuring the theme, you also need to import
 | --- | --- |
 | JD APP Theme (Light Mode) | `@nutui/nutui-react/dist/styles/themes/default.css` |
 | JD APP Theme (Dark Mode) | `@nutui/nutui-react/dist/styles/themes/dark.css` |
-| JD JDesign Theme | `@nutui/nutui-react/dist/styles/themes/jmapp.css` |
+| JD JMAPP Theme | `@nutui/nutui-react/dist/styles/themes/jmapp.css` |
 | JD JRKF Theme | `@nutui/nutui-react/dist/styles/themes/jrkf.css` |
 
 Currently, only the default theme provides support for dark mode.
-
-### Modify the configuration file of the local project vite or webpack
-
-Modify the **sass-loader** configuration in the vite or webpack configuration file. The following example
-
-#### vite configuration example
-
-:::demo
-
-```javascript
-// https://vitejs.dev/config/
-export default defineConfig({
-  //...
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // Default Jingdong APP 10.0 theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
-        // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jmapp.scss";
-        additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-      },
-    },
-  },
-})
-```
-
-:::
-
-#### webpack configuration example
-
-:::demo
-
-```javascript
-{
-    test: /\.(sa|sc)ss$/,
-    use: [
-        {
-            loader: 'sass-loader',
-            options: {
-                // Default Jingdong APP theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
-                // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
-                // Note: In different versions of sass-loader, the name of this option is different. For details, please refer to the version documentation corresponding to sass-loader
-                data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-            }
-        }
-    ]
-}
-```
-
-:::
diff --git a/src/sites/sites-react/doc/docs/react/official-theme-react.md b/src/sites/sites-react/doc/docs/react/official-theme-react.md
index e851e1c5b8..c8a07ce609 100644
--- a/src/sites/sites-react/doc/docs/react/official-theme-react.md
+++ b/src/sites/sites-react/doc/docs/react/official-theme-react.md
@@ -9,10 +9,9 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
 | 主题说明 | scss 文件名称 |
 | --- | --- |
 | 京东 APP 主题（默认） | `variables.scss` |
-| 京东 JDesign 主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` |
+| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/h5/react/jmapp-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` |
 | 京东 JRKF 主题 | `variables-jrkf.scss` |
 
-
 ## 使用方式
 
 需要注意的是，配置主题时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式：
@@ -21,56 +20,7 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
 | --- | --- |
 | 京东 APP 主题（明亮模式） | `@nutui/nutui-react/dist/styles/themes/default.css` |
 | 京东 APP 主题（暗黑模式） | `@nutui/nutui-react/dist/styles/themes/dark.css` |
-| 京东 JDesign 主题 | `@nutui/nutui-react/dist/styles/themes/jmapp.css` |
+| 京东 JMAPP 主题 | `@nutui/nutui-react/dist/styles/themes/jmapp.css` |
 | 京东 JRKF 主题 | `@nutui/nutui-react/dist/styles/themes/jrkf.css` |
 
 目前只有默认主题提供了暗黑模式的支持。
-
-### 修改本地项目 vite 或者 webpack 的配置文件
-
-修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例
-
-#### vite 配置示例
-
-:::demo
-
-```javascript
-// https://vitejs.dev/config/
-export default defineConfig({
-  //...
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
-        // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jmapp.scss";
-        additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-      },
-    },
-  },
-})
-```
-
-:::
-
-#### webpack 配置示例
-
-:::demo
-
-```javascript
-{
-    test: /\.(sa|sc)ss$/,
-    use: [
-        {
-            loader: 'sass-loader',
-            options: {
-                // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
-                // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
-                // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档
-                data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-            }
-        }
-    ]
-}
-```
-
-:::
diff --git a/src/sites/sites-react/doc/docs/react/start-react.en-US.md b/src/sites/sites-react/doc/docs/react/start-react.en-US.md
index 3dbf6888c4..f6b64ecd0f 100644
--- a/src/sites/sites-react/doc/docs/react/start-react.en-US.md
+++ b/src/sites/sites-react/doc/docs/react/start-react.en-US.md
@@ -28,7 +28,12 @@ npm install @nutui/nutui-react
 ```js
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
+// default theme
 import '@nutui/nutui-react/dist/style.css'
+// JMAPP Theme
+// import '@nutui/nutui-react/dist/style-jmapp.css'
+// JRKF theme
+// import '@nutui/nutui-react/dist/style-jrkf.css'
 import { Button } from '@nutui/nutui-react'
 
 ReactDOM.render(
@@ -53,7 +58,25 @@ import Button from '@nutui/nutui-react/dist/es/packages/button'
 It is important to note that when manually loading components on demand, you also need to import the global class file in your entry file to load some of NutUI React's global logic and styles:
 
 ```js
+// css theme file path
+// Default theme
 import '@nutui/nutui-react/dist/styles/themes/default.css'
+// Default Drak theme
+import '@nutui/nutui-react/dist/styles/themes/default-dark.css'
+// JMAPP Theme
+import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// JRKF theme
+import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
+
+// scss theme file path
+// Default theme
+import '@nutui/nutui-react/dist/styles/theme-default.scss'
+// Default Drak theme
+import '@nutui/nutui-react/dist/styles/theme-dark.scss'
+// JMAPP Theme
+import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'
+// JRKF theme
+import '@nutui/nutui-react/dist/styles/theme-jrkf.scss'
 ```
 
 #### Method 3: Automatic On-Demand Loading
@@ -74,6 +97,36 @@ yarn add vite-plugin-imp -D
 npm install vite-plugin-imp -D
 ```
 
+The entry file needs to import global styles.
+
+:::demo
+
+```js
+// app.js
+
+// CSS theme file path
+// Default theme
+import '@nutui/nutui-react/dist/styles/themes/default.css'
+// Default Drak theme
+// import '@nutui/nutui-react/dist/styles/themes/default-dark.css'
+// JMAPP Theme
+// import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// JRKF theme
+// import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
+
+// scss theme file path
+// Default theme
+// import '@nutui/nutui-react/dist/styles/theme-default.scss'
+// Default Drak theme
+// import '@nutui/nutui-react/dist/styles/theme-dark.scss'
+// JMAPP Theme
+// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'
+// JRKF theme
+// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss'
+```
+
+:::
+
 :::demo
 
 ```js
@@ -91,10 +144,23 @@ export default defineConfig({
         {
           libName: '@nutui/nutui-react',
           style: (name) => {
+            // Default theme
             // Handling on-demand import of CSS files, choose one of the two methods
             return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
             // Handling on-demand import of SCSS files, choose one of the two methods
             return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
+
+            // JMAPP
+            // Handling on-demand import of CSS files, choose one of the two methods
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css`
+            // Handling on-demand import of SCSS files, choose one of the two methods
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp`
+
+            // JRKF
+            // Handling on-demand import of CSS files, choose one of the two methods
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf/css`
+            // Handling on-demand import of SCSS files, choose one of the two methods
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf`
           },
           replaceOldImport: false,
           camel2DashComponentName: false,
@@ -102,6 +168,19 @@ export default defineConfig({
       ],
     }),
   ],
+  // The project uses SCSS preprocessed style files and requires the following configuration to be added.
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler', // or "modern"，"legacy"
+        additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`,
+        // JMAPP
+        // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';`
+        // JRKF
+        // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';`
+      },
+    },
+  },
 })
 ```
 
@@ -123,6 +202,68 @@ yarn add babel-plugin-import -D
 npm install babel-plugin-import -D
 ```
 
+The entry file needs to import global styles.
+
+:::demo
+
+```js
+// app.js
+
+// CSS theme file path
+// Default theme
+import '@nutui/nutui-react/dist/styles/themes/default.css'
+// Default Drak theme
+// import '@nutui/nutui-react/dist/styles/themes/default-dark.css'
+// JMAPP Theme
+// import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// JRKF theme
+// import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
+
+// scss theme file path
+// Default theme
+// import '@nutui/nutui-react/dist/styles/theme-default.scss'
+// Default Drak theme
+// import '@nutui/nutui-react/dist/styles/theme-dark.scss'
+// JMAPP Theme
+// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'
+// JRKF theme
+// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss'
+```
+
+:::
+
+webpack config：
+
+:::demo
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`,
+              // B
+              // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';`
+              // JRKF
+              // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';`
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+```
+
+:::
+
 babel config：
 
 :::demo
@@ -135,11 +276,15 @@ babel config：
       'import',
       {
         libraryName: '@nutui/nutui-react',
-        style: 'css', // Here are the CSS files for on-demand import. If you need to import SCSS files, you can set the style to true.
         camel2DashComponentName: false,
         customName: (name, file) => {
           return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}`
         },
+        // Automatically load SCSS style files.
+        customStyleName: (name) =>
+          `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`,
+        // Automatically load CSS style files.
+        // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
       },
       'nutui-react',
     ],
@@ -169,6 +314,6 @@ module.exports = {
 
 ## Templates
 
-The example code can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) directory.
+The example code can be found in the [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.x/packages/nutui-templates) directory.
 
 <content-examples/>
diff --git a/src/sites/sites-react/doc/docs/react/start-react.md b/src/sites/sites-react/doc/docs/react/start-react.md
index ce68fef7f3..a09678491d 100644
--- a/src/sites/sites-react/doc/docs/react/start-react.md
+++ b/src/sites/sites-react/doc/docs/react/start-react.md
@@ -28,7 +28,12 @@ npm install @nutui/nutui-react
 ```js
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
+// JRKF 默认
 import '@nutui/nutui-react/dist/style.css'
+// JMAPP 主题
+// import '@nutui/nutui-react/dist/style-jmapp.css'
+// JRKF 主题
+// import '@nutui/nutui-react/dist/style-jrkf.css'
 import { Button } from '@nutui/nutui-react'
 
 ReactDOM.render(
@@ -50,10 +55,28 @@ import '@nutui/nutui-react/dist/es/packages/button/style'
 import Button from '@nutui/nutui-react/dist/es/packages/button'
 ```
 
-需要注意的是，`在手动按需加载时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式：`
+需要注意的是，`在手动按需加载时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式：`。css 和 scss 主题文件路径，根据您实际项目采用的技术栈进行选择。
 
 ```js
+// css 主题文件路径
+// 默认主题
 import '@nutui/nutui-react/dist/styles/themes/default.css'
+// 默认暗黑主题
+import '@nutui/nutui-react/dist/styles/themes/default-dark.css'
+// JMAPP 主题
+import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// JRKF 主题
+import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
+
+// scss 主题文件路径
+// 默认主题
+import '@nutui/nutui-react/dist/styles/theme-default.scss'
+// 默认暗黑主题
+import '@nutui/nutui-react/dist/styles/theme-dark.scss'
+// JMAPP 主题
+import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'
+// JRKF 主题
+import '@nutui/nutui-react/dist/styles/theme-jrkf.scss'
 ```
 
 #### 方法三、自动的按需加载
@@ -74,6 +97,36 @@ yarn add vite-plugin-imp -D
 npm install vite-plugin-imp -D
 ```
 
+入口文件需要引入全局样式
+
+:::demo
+
+```js
+// app.js
+
+// css 主题文件路径
+// 默认主题
+import '@nutui/nutui-react/dist/styles/themes/default.css'
+// 默认暗黑主题
+// import '@nutui/nutui-react/dist/styles/themes/default-dark.css'
+// JMAPP 主题
+// import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// JRKF 主题
+// import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
+
+// scss 主题文件路径
+// 默认主题
+// import '@nutui/nutui-react/dist/styles/theme-default.scss'
+// 默认暗黑主题
+// import '@nutui/nutui-react/dist/styles/theme-dark.scss'
+// JMAPP 主题
+// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'
+// JRKF 主题
+// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss'
+```
+
+:::
+
 :::demo
 
 ```js
@@ -91,10 +144,23 @@ export default defineConfig({
         {
           libName: '@nutui/nutui-react',
           style: (name) => {
+            // 默认主题
             // 按需引入 css 文件的处理，两种方式择其一
             return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
             // 按需引入 scss 文件的处理，两种方式择其一
             return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
+
+            // JMAPP 主题
+            // 按需引入 css 文件的处理，两种方式择其一
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css`
+            // 按需引入 scss 文件的处理，两种方式择其一
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp`
+
+            // JRKF 主题
+            // 按需引入 css 文件的处理，两种方式择其一
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf/css`
+            // 按需引入 scss 文件的处理，两种方式择其一
+            // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jrkf`
           },
           replaceOldImport: false,
           camel2DashComponentName: false,
@@ -102,6 +168,19 @@ export default defineConfig({
       ],
     }),
   ],
+  // 项目中采用 scss 预处理样式文件，需要添加如下配置
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler', // 或 "modern"，"legacy"
+        additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`,
+        // JMAPP 主题
+        // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';`
+        // JRKF 主题
+        // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';`
+      },
+    },
+  },
 })
 ```
 
@@ -123,6 +202,68 @@ yarn add babel-plugin-import -D
 npm install babel-plugin-import -D
 ```
 
+入口文件需要引入全局样式
+
+:::demo
+
+```js
+// app.js
+
+// css 主题文件路径
+// 默认主题
+import '@nutui/nutui-react/dist/styles/themes/default.css'
+// 默认暗黑主题
+// import '@nutui/nutui-react/dist/styles/themes/default-dark.css'
+// JMAPP 主题
+// import '@nutui/nutui-react/dist/styles/themes/jmapp.css'
+// JRKF 主题
+// import '@nutui/nutui-react/dist/styles/themes/jrkf.css'
+
+// scss 主题文件路径
+// 默认主题
+// import '@nutui/nutui-react/dist/styles/theme-default.scss'
+// 默认暗黑主题
+// import '@nutui/nutui-react/dist/styles/theme-dark.scss'
+// JMAPP 主题
+// import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'
+// JRKF 主题
+// import '@nutui/nutui-react/dist/styles/theme-jrkf.scss'
+```
+
+:::
+
+webpack 配置：
+
+:::demo
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              additionalData: `@import '@nutui/nutui-react/dist/styles/variables.scss';`,
+              // JMAPP 主题
+              // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jmapp.scss';`
+              // JRKF 主题
+              // additionalData: `@import '@nutui/nutui-react/dist/styles/variables-jrkf.scss';`
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+```
+
+:::
+
 babel 配置：
 
 :::demo
@@ -135,11 +276,28 @@ babel 配置：
       'import',
       {
         libraryName: '@nutui/nutui-react',
-        style: 'css', // 这里是按需引入的 css 文件，如果需要引入 scss 文件，可将 style 设置为 true
         camel2DashComponentName: false,
         customName: (name, file) => {
           return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}`
         },
+        // 默认主题
+        // 自动加载 scss 样式文件
+        customStyleName: (name) =>
+          `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`,
+        // 自动加载 css 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
+
+        // JMAPP 主题
+        // 自动加载 scss 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp`,
+        // 自动加载 css 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jmapp/css`
+
+        // jkrf 端主题
+        // 自动加载 scss 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jkrf`,
+        // 自动加载 css 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style-jkrf/css`
       },
       'nutui-react',
     ],
@@ -169,6 +327,6 @@ module.exports = {
 
 ## 示例
 
-示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/next/packages/nutui-templates) 下查看
+示例代码可以再 [packages/templates](https://github.com/jdf2e/nutui-react/tree/feat_v3.x/packages/nutui-templates) 下查看
 
 <content-examples/>
diff --git a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md
index 3c50b8871e..fe80aad6b4 100644
--- a/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md
+++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md
@@ -9,7 +9,7 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing
 | theme description | scss file name |
 | --- | --- |
 | Jingdong APP 10.0 theme (default) | `variables.scss` |
-| Jingdong JDesign Theme | `variables-jdb.scss ` |
+| Jingdong JMAPP Theme | `variables-jmapp.scss ` |
 
 ## How to use
 
@@ -19,56 +19,7 @@ It is important to note that when configuring the theme, you also need to import
 | --- | --- |
 | JD APP Theme (Light Mode) | `@nutui/nutui-react-taro/dist/styles/themes/default.css` |
 | JD APP Theme (Dark Mode) | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` |
-| JD JDesign Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` |
+| JD JMAPP Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` |
 | JD JRKF Theme | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` |
 
 Currently, only the default theme provides support for dark mode.
-
-### Modify the configuration file of the local project vite or webpack
-
-Modify the **sass-loader** configuration in the vite or webpack configuration file. The following example
-
-#### vite configuration example
-
-:::demo
-
-```javascript
-// https://vitejs.dev/config/
-export default defineConfig({
-  //...
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // Default Jingdong APP 10.0 theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
-        // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jmapp.scss";
-        additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-      },
-    },
-  },
-})
-```
-
-:::
-
-#### webpack configuration example
-
-:::demo
-
-```javascript
-{
-    test: /\.(sa|sc)ss$/,
-    use: [
-        {
-            loader: 'sass-loader',
-            options: {
-                // Default Jingdong APP theme > @import "@nutui/nutui-react/dist/styles/variables.scss";
-                // Jingdong B Mall theme > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
-                // Note: In different versions of sass-loader, the name of this option is different. For details, please refer to the version documentation corresponding to sass-loader
-                data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-            }
-        }
-    ]
-}
-```
-
-:::
diff --git a/src/sites/sites-react/doc/docs/taro/official-theme-react.md b/src/sites/sites-react/doc/docs/taro/official-theme-react.md
index 284a182180..8ef442c5b7 100644
--- a/src/sites/sites-react/doc/docs/taro/official-theme-react.md
+++ b/src/sites/sites-react/doc/docs/taro/official-theme-react.md
@@ -9,7 +9,7 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
 | 主题说明 | scss 文件名称 |
 | --- | --- |
 | 京东 APP 主题（默认） | `variables.scss` |
-| 京东 JDesign 主题 ([预览](https://nutui.jd.com/taro/react/jdesign-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` |
+| 京东 JMAPP 主题 ([预览](https://nutui.jd.com/taro/react/jmapp-3x/demo/index.html#/pages/index/index)) | `variables-jmapp.scss` |
 
 ## 使用方式
 
@@ -19,56 +19,7 @@ NutUI 默认提供多套官方`UI`主题，同时允许在一定程度上定制
 | --- | --- |
 | 京东 APP 主题（明亮模式） | `@nutui/nutui-react-taro/dist/styles/themes/default.css` |
 | 京东 APP 主题（暗黑模式） | `@nutui/nutui-react-taro/dist/styles/themes/dark.css` |
-| 京东 JDesign 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` |
+| 京东 JMAPP 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` |
 | 京东 JRKF 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` |
 
 目前只有默认主题提供了暗黑模式的支持。
-
-### 修改本地项目 vite 或者 webpack 的配置文件
-
-修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例
-
-#### vite 配置示例
-
-:::demo
-
-```javascript
-// https://vitejs.dev/config/
-export default defineConfig({
-  //...
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
-        // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jmapp.scss";
-        additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-      },
-    },
-  },
-})
-```
-
-:::
-
-#### webpack 配置示例
-
-:::demo
-
-```javascript
-{
-    test: /\.(sa|sc)ss$/,
-    use: [
-        {
-            loader: 'sass-loader',
-            options: {
-                // 默认京东 APP 主题 > @import "@nutui/nutui-react/dist/styles/variables.scss";
-                // 京东B商城主题 > @import "@nutui/nutui-react/dist/styles/variables-jdb.scss";
-                // 注意：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader对应的版本文档
-                data: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
-            }
-        }
-    ]
-}
-```
-
-:::
diff --git a/src/sites/sites-react/doc/docs/taro/start-react.en-US.md b/src/sites/sites-react/doc/docs/taro/start-react.en-US.md
index 7f2f8664b9..e6215351ab 100644
--- a/src/sites/sites-react/doc/docs/taro/start-react.en-US.md
+++ b/src/sites/sites-react/doc/docs/taro/start-react.en-US.md
@@ -105,7 +105,12 @@ config = {
 You can choose to import style files in full:
 
 ```js
-import '@nutui/nutui-react-taro/dist/style.css'
+// default
+// import '@nutui/nutui-react-taro/dist/style.css'
+// B
+// import '@nutui/nutui-react-taro/dist/style-jmapp.css'
+// JKRF
+// import '@nutui/nutui-react-taro/dist/style-jkrf.css'
 ```
 
 You can also implement on-demand import of styles in the following ways:
@@ -115,7 +120,25 @@ You can also implement on-demand import of styles in the following ways:
 Note that when manually loading components on demand, you also need to import the global class file in the entry file to load some of NutUI React Taro's global logic and styles:
 
 ```js
+// css theme file path
+// Default theme
 import '@nutui/nutui-react-taro/dist/styles/themes/default.css'
+// Default Drak theme
+// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css'
+// JMAPP Theme
+// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css'
+// JRKF theme
+// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css'
+
+// scss theme file path
+// Default theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss'
+// Default Drak theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss'
+// JMAPP Theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss'
+// JRKF theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss'
 ```
 
 Install `babel-plugin-import`.
@@ -133,25 +156,70 @@ babel config
 
 :::demo
 
+```js
+// app.js
+// Default theme
+import '@nutui/nutui-react-taro/dist/styles/themes/default.css'
+// Default Drak theme
+// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css'
+// JMAPP Theme
+// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css'
+// JRKF theme
+// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css'
+
+// scss theme file path
+// Default theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss'
+// Default Drak theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss'
+// JMAPP Theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss'
+// JRKF theme
+// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss'
+```
+
+:::
+
+babel config：
+
 ```js
 // babel.config.js
-plugins: [
-  [
-    'import',
-    {
-      libraryName: '@nutui/nutui-react-taro',
-      style: 'css', // Here are the CSS files for on-demand import. If you need to import SCSS files, you can set the style to true.
-      camel2DashComponentName: false,
-      customName: (name, file) => {
-        return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}`
+module.exports = {
+  presets: [
+    // ...
+  ],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: '@nutui/nutui-react',
+        camel2DashComponentName: false,
+        customName: (name, file) => {
+          return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}`
+        },
+        customStyleName: (name) =>
+          `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style`,
+        // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css`
       },
-    },
-    'nutui-react-taro',
+      'nutui-react',
+    ],
   ],
-]
+}
 ```
 
-:::
+Taro config/index.js
+
+```js
+{
+  sass: {
+    data: '@import "@nutui/nutui-react-taro/dist/styles/variables.scss";'
+    // JMAPP Theme
+    // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jmapp.scss';`
+    // JRKF Theme
+    // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jrkf.scss';`
+  }
+}
+```
 
 ## Precautions
 
diff --git a/src/sites/sites-react/doc/docs/taro/start-react.md b/src/sites/sites-react/doc/docs/taro/start-react.md
index cd8a78485f..437eb0956e 100644
--- a/src/sites/sites-react/doc/docs/taro/start-react.md
+++ b/src/sites/sites-react/doc/docs/taro/start-react.md
@@ -110,7 +110,14 @@ config = {
 您可以选择全量引入样式文件：
 
 ```js
+// 默认主题
 import '@nutui/nutui-react-taro/dist/style.css'
+// 默认主题暗黑模式
+// import '@nutui/nutui-react-taro/dist/style.css'
+// JMAPP 主题
+// import '@nutui/nutui-react-taro/dist/style-jmapp.css'
+// JKRF 主题
+// import '@nutui/nutui-react-taro/dist/style-jkrf.css'
 ```
 
 #### 3.1、通过插件实现按需引入
@@ -118,7 +125,25 @@ import '@nutui/nutui-react-taro/dist/style.css'
 需要注意的是，`在手动按需加载时，你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React Taro 的全局性逻辑和样式：`
 
 ```js
+// css 主题文件路径
+// 默认主题
 import '@nutui/nutui-react-taro/dist/styles/themes/default.css'
+// 默认暗黑主题
+// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css'
+// JMAPP 主题
+// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css'
+// JRKF 主题
+// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css'
+
+// scss 主题文件路径
+// 默认主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss'
+// 默认暗黑主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss'
+// JMAPP 主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss'
+// JRKF 主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss'
 ```
 
 首先安装 `babel-plugin-import` 插件
@@ -132,7 +157,37 @@ npm i babel-plugin-import
 yarn add babel-plugin-import
 ```
 
-安装后在项目中设置 babel 相关配置：
+入口文件需要引入全局样式
+
+:::demo
+
+```js
+// app.js
+
+// css 主题文件路径
+// 默认主题
+import '@nutui/nutui-react-taro/dist/styles/themes/default.css'
+// 默认暗黑主题
+// import '@nutui/nutui-react-taro/dist/styles/themes/default-dark.css'
+// JMAPP 主题
+// import '@nutui/nutui-react-taro/dist/styles/themes/jmapp.css'
+// JRKF 主题
+// import '@nutui/nutui-react-taro/dist/styles/themes/jrkf.css'
+
+// scss 主题文件路径
+// 默认主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-default.scss'
+// 默认暗黑主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-dark.scss'
+// JMAPP 主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-jmapp.scss'
+// JRKF 主题
+// import '@nutui/nutui-react-taro/dist/styles/theme-jrkf.scss'
+```
+
+:::
+
+babel 相关配置：
 
 ```js
 // babel.config.js
@@ -144,19 +199,49 @@ module.exports = {
     [
       'import',
       {
-        libraryName: '@nutui/nutui-react-taro',
-        style: 'css', // 这里是按需引入的 css 文件，如果需要引入 scss 文件，可将 style 设置为 true
+        libraryName: '@nutui/nutui-react',
         camel2DashComponentName: false,
         customName: (name, file) => {
           return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}`
         },
+        // 自动加载 scss 样式文件
+        customStyleName: (name) =>
+          `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style`,
+        // 自动加载 css 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css`
+
+        // JMAPP 主题
+        // 自动加载 scss 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jmapp`,
+        // 自动加载 css 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jmapp/css`
+
+        // jkrf 端主题
+        // 自动加载 scss 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jkrf`,
+        // 自动加载 css 样式文件
+        // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style-jkrf/css`
       },
-      'nutui-react-taro',
+      'nutui-react',
     ],
   ],
 }
 ```
 
+若您的项目采用 scss，则需要在 config/index 中增加如下配置：
+
+```js
+{
+  sass: {
+    data: '@import "@nutui/nutui-react-taro/dist/styles/variables.scss";'
+    // JMAPP 主题
+    // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jmapp.scss';`
+    // JRKF 主题
+    // data: `@import '@nutui/nutui-react-taro/dist/styles/variables-jrkf.scss';`
+  }
+}
+```
+
 ## 注意事项
 
 #### 1、检查 Taro 是否安装成功
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 64608ffa0b..b5a0ba6295 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -5,6 +5,10 @@ $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff9999) !default;
 $color-primary-stop-2: var(--nutui-color-primary-stop-2, #ff6666) !default;
 $color-primary-pressed: var(--nutui-color-primary-pressed, #ff4c4c) !default;
 $color-primary-disabled: var(--nutui-color-primary-disabled, #ffb2b2) !default;
+$color-primary-disabled-special: var(
+  --nutui-color-primary-disabled-special,
+  #ffadbe
+) !default;
 $color-primary-light: var(--nutui-color-primary-light, #ffe5e5) !default;
 $color-primary-light-pressed: var(
   --nutui-color-primary-light-pressed,
@@ -15,6 +19,15 @@ $color-primary-gradient-1: linear-gradient(
   $color-primary-stop-1 0%,
   $color-primary-stop-2 100%
 ) !default;
+$color-primary-icon: var(--nutui-color-primary-icon, #ff3333) !default;
+$color-primary-icon-disabled: var(
+  --nutui-color-primary-icon-disabled,
+  #dadce0
+) !default;
+$color-primary-specialdisabled: var(
+  --nutui-color-primary-specialdisabled,
+  #ffadbe
+) !default;
 
 // 默认
 $color-default: var(--nutui-color-default) !default;
@@ -72,6 +85,7 @@ $color-border: var(
 $color-border-tint: var(
   --nutui-border-tint
 ) !default; // 默认按钮、输入框等表单组件默认的边框禁用色
+$color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default;
 
 // 文本
 $color-title: var(
@@ -118,6 +132,7 @@ $font-weight-bold: var(--nutui-font-weight-bold) !default;
 $line-height-base: var(--nutui-line-height) !default;
 
 // 间距 space
+$spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default;
 $spacing-xxs: var(--nutui-spacing-xxs) !default; // 多用于文本与图标之间的间距
 $spacing-xs: var(--nutui-spacing-xs) !default; // 多用于文本与图标之间的间距
 $spacing-s: var(--nutui-spacing-s) !default; // 二级卡片与屏幕两侧的间距
@@ -223,11 +238,19 @@ $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
 $padding-xs: var(--nutui-padding-xs, $spacing-xl) !default;
 
 // button（✅）
+$button-xlarge-border-radius: var(
+  --nutui-button-xlarge-border-radius,
+  $radius-base
+) !default;
 $button-transition: all 0.15s ease-in-out;
 $button-square-border-radius: var(
   --nutui-button-square-border-radius,
   0px
 ) !default;
+$button-xlarge-text-icon-margin: var(
+  --nutui-button-xlarge-text-icon-margin,
+  6px
+) !default;
 $button-border-radius: var(--nutui-button-border-radius, $radius-s) !default;
 $button-border-width: var(--nutui-button-border-width, 1px) !default;
 
@@ -493,6 +516,65 @@ $divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default;
 $divider-vertical-top: var(--nutui-divider-vertical-top, 2px) !default;
 $divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default;
 
+// sidebar（✅）
+$sidebar-background-color: var(
+  --nutui-sidebar-background-color,
+  $color-background
+) !default;
+$sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default;
+$sidebar-width: var(--nutui-sidebar-width, 104px) !default;
+$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default;
+$sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default;
+$sidebar-inactive-font-size: var(
+  --nutui-sidebar-inactive-font-size,
+  $font-size-base
+) !default;
+$sidebar-active-font-size: var(
+  --nutui-sidebar-active-font-size,
+  $font-size-l
+) !default;
+$sidebar-active-font-weight: var(
+  --nutui-sidebar-active-font-weight,
+  $font-weight-bold
+) !default;
+$sidebar-active-color: var(
+  --nutui-sidebar-active-color,
+  $color-primary
+) !default;
+$sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default;
+$sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default;
+
+// segmented
+$segmented-height: var(--nutui-segmented-height, 24px) !default;
+$segmented-padding: var(--nutui-segmented-padding, $spacing-xxxs) !default;
+$segmented-border-radius: var(--nutui-segmented-radius, $radius-xs) !default;
+$segmented-background: var(
+  --nutui-segmented-background,
+  $color-mask-part
+) !default;
+$segmented-item-height: var(--nutui-segmented-height, 20px) !default;
+$segmented-item-padding: var(
+  --nutui-segmented-item-padding,
+  0 $spacing-xs
+) !default;
+$segmented-item-radius: var(--nutui-segmented-item-radius, $radius-xs) !default;
+$segmented-item-fontsize: var(
+  --nutui-segmented-item-fontsize,
+  $font-size-s
+) !default;
+$segmented-item-color: var(
+  --nutui-segmented-item-color,
+  $color-primary-text
+) !default;
+$segmented-active-background: var(
+  --nutui-segmented-active-background,
+  $color-mask-part
+) !default;
+$segmented-icon-margin-right: var(
+  --nutui-segmented-icon-margin-right,
+  $spacing-xxxs
+) !default;
+
 // icon（✅）
 
 $icon-height: var(--nutui-icon-height, 20px) !default;
@@ -855,6 +937,16 @@ $countdown-number-primary-background-color: var(
   --nutui-countdown-number-primary-background-color,
   $color-primary
 ) !default;
+//xlarge price（✅）
+$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default;
+$price-integer-xlarge-size: var(
+  --nutui-price-integer-xlarge-size,
+  24px
+) !default;
+$price-decimal-xlarge-size: var(
+  --nutui-price-decimal-xlarge-size,
+  12px
+) !default;
 //large price（✅）
 $price-symbol-padding-right: var(
   --nutui-price-symbol-padding-right,
@@ -863,7 +955,25 @@ $price-symbol-padding-right: var(
 $price-symbol-big-size: var(--nutui-price-symbol-big-size, 18px) !default;
 $price-integer-big-size: var(--nutui-price-integer-big-size, 24px) !default;
 $price-decimal-big-size: var(--nutui-price-decimal-big-size, 18px) !default;
+$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default;
+$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default;
+$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default;
 
+//price（✅）
+$price-primary-color: var(--nutui-price-color, $color-primary) !default;
+$price-color: var(--nutui-price-color, var(--nutui-color-text-help)) !default;
+$price-darkgray-color: var(
+  --nutui-price-darkgray-color,
+  var(--nutui-gray-7)
+) !default;
+$price-line-color: var(
+  --nutui-price-line-color,
+  var(--nutui-color-text-help)
+) !default;
+$price-symbol-padding-right: var(
+  --nutui-price-symbol-padding-right,
+  0px
+) !default;
 //normal price（✅）
 $price-line-color: var(--nutui-price-line-color, $color-border) !default;
 $price-line-font-size: var(--nutui-price-line-font-size, 12px) !default;
@@ -876,6 +986,15 @@ $price-decimal-medium-size: var(
   --nutui-price-decimal-medium-size,
   14px
 ) !default;
+$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default;
+$price-integer-normal-size: var(
+  --nutui-price-integer-normal-size,
+  16px
+) !default;
+$price-decimal-normal-size: var(
+  --nutui-price-decimal-normal-size,
+  12px
+) !default;
 
 // small price（✅）
 $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default;
@@ -892,6 +1011,34 @@ $avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default;
 $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
 
 //switch（✅）
+$switch-inactive-background-color: var(
+  --nutui-switch-inactive-background-color,
+  $color-text-disabled
+) !default;
+$switch-inactive-disabled-background-color: var(
+  --nutui-switch-inactive-disabled-background-color,
+  $color-background
+) !default;
+$switch-label-font-size: var(
+  --nutui-switch-label-font-size,
+  $font-size-s
+) !default;
+$switch-inactive-disabled-label-text-color: var(
+  --nutui-switch-inactive-disabled-label-text-color,
+  $color-text-disabled
+) !default;
+$switch-inactive-line-background-color: var(
+  --nutui-switch-inactive-line-background-color,
+  #ffffff
+) !default;
+$switch-label-text-color: var(
+  --nutui-switch-label-text-color,
+  $color-primary-text
+) !default;
+$switch-active-background-color: var(
+  --nutui-switch-active-background-color,
+  $color-primary
+) !default;
 $switch-close-background-color: var(
   --nutui-switch-close-background-color,
   $color-default
@@ -916,6 +1063,7 @@ $switch-width: var(--nutui-switch-width, 40px) !default;
 $switch-height: var(--nutui-switch-height, 24px) !default;
 $switch-line-height: var(--nutui-switch-line-height, 24px) !default;
 $switch-border-radius: var(--nutui-switch-border-radius, 24px) !default;
+$switch-border-width: var(--nutui-switch-border-width, 2px) !default;
 $switch-inside-width: var(--nutui-switch-inside-width, 20px) !default;
 $switch-inside-height: var(--nutui-switch-inside-height, 20px) !default;
 $switch-inside-border-radius: var(
@@ -934,6 +1082,24 @@ $switch-button-box-shadow: var(
   --nutui-switch-box-shadow,
   $shadow-raised
 ) !default;
+/* #ifdef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+) !default;
+/* #endif */
+/* #ifndef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 1px 0px rgba(0, 0, 0, 0.06),
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+  0px 0px 0px 1px rgba(0, 0, 0, 0.02)
+) !default;
+/* #endif */
+$switch-active-disabled-background-color: var(
+  --nutui-switch-active-disabled-background-color,
+  $color-primary-disabled-special
+) !default;
 
 // toast（✅）
 $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
@@ -1052,6 +1218,7 @@ $hoverbutton-position-right: var(
   --nutui-hoverbutton-position-right,
   var(--nutui-spacing-16, 16px)
 ) !default;
+$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
   var(--nutui-black-3, rgba(0, 0, 0, 0.06))
@@ -1089,6 +1256,10 @@ $overlay-animation-duration: var(
   0.3s
 ) !default;
 //popup（✅）
+$popup-description-spacing: var(
+  --nutui-popup-description-spacing,
+  $spacing-base
+) !default;
 $popup-border-radius: var(--nutui-popup-border-radius, 12px) !default;
 $popup-icon-size: var(--nutui-popup-icon-size, $font-size-xl) !default;
 $popup-title-padding: var(--nutui-popup-title-padding, 12px) !default;
@@ -1145,6 +1316,9 @@ $notify-z-index: var(--nutui-notify-z-index, 1000) !default;
 $notify-background-color: var(--nutui-notify-background-color, $white) !default;
 
 // rate（✅）
+$rate-icon-size: var(--nutui-rate-icon-size, 12px) !default;
+$rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
+$rate-font-size: var(--nutui-rate-font-size, 12px) !default;
 $rate-item-margin: var(--nutui-rate-item-margin, 14px) !default;
 $rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default;
 $rate-icon-inactive-color: var(
@@ -1359,6 +1533,15 @@ $steps-dot-icon-border: var(
 $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default;
 
 // dialog（✅）
+$dialog-bottom-close-icon-size: var(
+  --nutui-dialog-bottom-close-icon-size,
+  24px
+) !default;
+$dialog-footer-cancel-bg: var(
+  --nutui-dialog-footer-cancel-bg,
+  $button-default-background-color
+);
+$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default;
 $dialog-width: var(--nutui-dialog-width, 295px) !default;
 $dialog-padding: var(
   --nutui-dialog-padding,
@@ -1657,6 +1840,14 @@ $badge-content-transform: var(
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
 $badge-dot-width: var(--nutui-badge-dot-width, 8px) !default;
 $badge-dot-border: var(--nutui-badge-dot-border, none) !default;
+$badge-dot-small-width: var(--nutui-badge-dot-small-width, 4px) !default;
+$badge-dot-large-width: var(--nutui-badge-dot-large-width, 8px) !default;
+$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text);
+$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default;
+$badge-outline-border: var(
+  --nutui-badge-outline-border,
+  1px solid $color-primary
+);
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default;
@@ -2141,7 +2332,12 @@ $color-background-overlay: var(
 ) !default;
 
 // grid（✅）
+$grid-border-width: var(--nutui-grid-border-width, 0px) !default;
 $grid-border-color: var(--nutui-grid-border-color, $color-border) !default;
+$grid-item-border-radius: var(
+  --nutui-grid-item-border-radius,
+  $radius-l
+) !default;
 $grid-item-content-padding: var(
   --nutui-grid-item-content-padding,
   16px 8px
@@ -2428,6 +2624,10 @@ $loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default;
 $loading-icon-size: var(--nutui-loading-icon-size, $font-size-s) !default;
 $loading-color: var(--nutui-loading-color, $color-text-help) !default;
 $loading-font-size: var(--nutui-loading-font-size, $font-size-s) !default;
+$loading-lottie-background: var(
+  --nutui-loading-lottie-background,
+  rgba(0, 0, 0, 0.06)
+) !default;
 // ResultPage
 $resultpage-width: var(--nutui-resultpage-width, 247px) !default;
 $resultpage-icon-size: var(--nutui-resultpage-icon-size, 48px) !default;