NutUI-React-Raro 按需引入

记录一下用Taro框架开发微信小程序中的小问题。

用npx @tarojs/cli init project-name初始化默认模板后，想引入NutUI。然而按照官网的方法操作后“全局引入”没有什么问题，但是“按需引入”样式就不会生效。版本3.0.18指南内容不全，issues:3320对其进行了补充。

引NutUI-React-Raro流程：

1. 安装 nutui-react-taro

   npm i @nutui/nutui-react-taro
   

2. 配置

   app.ts

   import '@nutui/nutui-react-taro/dist/styles/themes/default.css'
   

   config/index.ts

   {
     sass: {
       resource: ['node_modules/@nutui/nutui-react-taro/dist/styles/variables.scss']
     }
   }
   

3. 安装 vite-plugin-imp

   npm i vite-plugin-imp
   

4. 配置

   config/index.ts

   import vitePluginImp from 'vite-plugin-imp'
   
   {
     compiler: {
       type: 'vite',
       vitePlugins: [
         vitePluginImp({
           libList: [
             {
               libName: '@nutui/nutui-react-taro',
               style: (name) => {
                 // 默认主题
                 // 按需引入 css 文件的处理，两种方式择其一
                 return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/style.css`
               },
               replaceOldImport: false,
               camel2DashComponentName: false,
             },
           ],
         })
       ]
     }
   }
   

5. 配置 config/index.ts

   {
     designWidth(input) {
       // 配置 NutUI 375 尺寸
       if (input?.file?.replace(/\+/g, '/').indexOf('@nutui') > -1) {
         return 375
       }
       // 全局使用 Taro 默认的 750 尺寸
       return 750
     }
   }
   

完成了！

参见：

NutUI-React 小程序

nutui.jd.com/taro/react/…

NutUI-React issues

github.com/jdf2e/nutui…