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 415c252dd2..fc315e5dac 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 @@ -13,6 +13,17 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing ## How to use +It is important to note that when configuring the theme, you also need to import the global class files in the entry file to load some global logic and styles for NutUI React: + +| theme description | scss file name | +| --- | --- | +| 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 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 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 17e488f7ab..e851e1c5b8 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 @@ -10,9 +10,22 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 | --- | --- | | 京东 APP 主题(默认) | `variables.scss` | | 京东 JDesign 主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | +| 京东 JRKF 主题 | `variables-jrkf.scss` | + ## 使用方式 +需要注意的是,配置主题时,你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式: + +| 主题说明 | scss 文件名称 | +| --- | --- | +| 京东 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` | +| 京东 JRKF 主题 | `@nutui/nutui-react/dist/styles/themes/jrkf.css` | + +目前只有默认主题提供了暗黑模式的支持。 + ### 修改本地项目 vite 或者 webpack 的配置文件 修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例 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 30135e2260..3dbf6888c4 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 @@ -91,7 +91,10 @@ export default defineConfig({ { libName: '@nutui/nutui-react', style: (name) => { + // 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` }, replaceOldImport: false, camel2DashComponentName: false, @@ -132,7 +135,7 @@ babel config: 'import', { libraryName: '@nutui/nutui-react', - style: 'css', + 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()}` 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 c795a1050d..ce68fef7f3 100644 --- a/src/sites/sites-react/doc/docs/react/start-react.md +++ b/src/sites/sites-react/doc/docs/react/start-react.md @@ -91,7 +91,10 @@ 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` }, replaceOldImport: false, camel2DashComponentName: false, @@ -132,7 +135,7 @@ babel 配置: 'import', { libraryName: '@nutui/nutui-react', - style: 'css', + style: 'css', // 这里是按需引入的 css 文件,如果需要引入 scss 文件,可将 style 设置为 true camel2DashComponentName: false, customName: (name, file) => { return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}` diff --git a/src/sites/sites-react/doc/docs/react/theme-react.en-US.md b/src/sites/sites-react/doc/docs/react/theme-react.en-US.md index 94d1a761ed..40a1910581 100644 --- a/src/sites/sites-react/doc/docs/react/theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/react/theme-react.en-US.md @@ -23,6 +23,8 @@ We recommend replacing [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/ Create a new 'SCSS' file 'custom_theme.scss' in your local project. +**When customizing themes using SCSS files, you need to set the on-demand import to the SCSS file method. Refer to the description in the automatic on-demand loading configuration in the quick start guide.** + ```scss // Dominant tone $color-primary: #fa2c19; diff --git a/src/sites/sites-react/doc/docs/react/theme-react.md b/src/sites/sites-react/doc/docs/react/theme-react.md index 31b633e925..4668db76ec 100644 --- a/src/sites/sites-react/doc/docs/react/theme-react.md +++ b/src/sites/sites-react/doc/docs/react/theme-react.md @@ -20,6 +20,8 @@ NutUI-React 支持灵活的样式定制,满足多种视觉业务和品牌需 在本地项目中新建一个 `SCSS` 文件 `custom_theme.scss` 进行自定义。 +**使用 SCSS 文件自定义主题时,需将按需引入设置为 scss 文件的方式,参考快速入手中的自动按需加载配置项中的描述** + ```scss // 主色调 $color-primary: #fa2c19; 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 415c252dd2..3c50b8871e 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 @@ -13,6 +13,17 @@ NutUI provides multiple sets of official `UI` themes by default, while allowing ## How to use +It is important to note that when configuring the theme, you also need to import the global class files in the entry file to load some global logic and styles for NutUI React: + +| theme description | scss file name | +| --- | --- | +| 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 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 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 ce597d5dda..284a182180 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 @@ -13,6 +13,17 @@ NutUI 默认提供多套官方`UI`主题,同时允许在一定程度上定制 ## 使用方式 +需要注意的是,配置主题时,你还需要在入口文件中引入 global 类的文件来加载一些 NutUI React 的全局性逻辑和样式: + +| 主题说明 | scss 文件名称 | +| --- | --- | +| 京东 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` | +| 京东 JRKF 主题 | `@nutui/nutui-react-taro/dist/styles/themes/jrkf.css` | + +目前只有默认主题提供了暗黑模式的支持。 + ### 修改本地项目 vite 或者 webpack 的配置文件 修改 vite 或者 webpack 配置文件中 **sass-loader** 的配置。如下示例 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 b53a7becf6..7f2f8664b9 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 @@ -140,7 +140,7 @@ plugins: [ 'import', { libraryName: '@nutui/nutui-react-taro', - style: 'css', + 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()}` 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 5e53fc3a2f..cd8a78485f 100644 --- a/src/sites/sites-react/doc/docs/taro/start-react.md +++ b/src/sites/sites-react/doc/docs/taro/start-react.md @@ -145,7 +145,7 @@ module.exports = { 'import', { libraryName: '@nutui/nutui-react-taro', - style: 'css', + style: 'css', // 这里是按需引入的 css 文件,如果需要引入 scss 文件,可将 style 设置为 true camel2DashComponentName: false, customName: (name, file) => { return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` diff --git a/src/sites/sites-react/doc/docs/taro/theme-react.en-US.md b/src/sites/sites-react/doc/docs/taro/theme-react.en-US.md index 94d1a761ed..1ab1eba144 100644 --- a/src/sites/sites-react/doc/docs/taro/theme-react.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/theme-react.en-US.md @@ -23,6 +23,8 @@ We recommend replacing [CSS Vars] (https://developer.mozilla.org/zh-CN/docs/Web/ Create a new 'SCSS' file 'custom_theme.scss' in your local project. +**When customizing themes using SCSS files, you need to set the on-demand import to the SCSS file method. Refer to the description in the automatic on-demand loading configuration in the quick start guide.** + ```scss // Dominant tone $color-primary: #fa2c19; @@ -32,7 +34,7 @@ $color-primary-end: #fa6419; #### Step 2: Modify the configuration file of the local project webpack or vite -Modify the ** ass-loader** configuration in the 'vite' or 'webpack' configuration file. The following example +Modify the ** sass-loader** configuration in the 'vite' or 'webpack' configuration file. The following example #### vite diff --git a/src/sites/sites-react/doc/docs/taro/theme-react.md b/src/sites/sites-react/doc/docs/taro/theme-react.md index 31b633e925..4668db76ec 100644 --- a/src/sites/sites-react/doc/docs/taro/theme-react.md +++ b/src/sites/sites-react/doc/docs/taro/theme-react.md @@ -20,6 +20,8 @@ NutUI-React 支持灵活的样式定制,满足多种视觉业务和品牌需 在本地项目中新建一个 `SCSS` 文件 `custom_theme.scss` 进行自定义。 +**使用 SCSS 文件自定义主题时,需将按需引入设置为 scss 文件的方式,参考快速入手中的自动按需加载配置项中的描述** + ```scss // 主色调 $color-primary: #fa2c19;