QA：特殊问题集中展示

[eiinu]

此讨论不再更新，已迁移至 #2461

[eiinu]

一、按需引入与 unplugin 插件

1、使用 JSX、TSX 编写项目时无法实现自动按需引入

unplugin-vue-components 插件的默认配置不识别 JSX、TSX 文件，需要手动添加 include 字段：

Components({
  include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
  resolvers: [NutUIResolver()],
})

2、使用自动按需引入时组件没有类型提示

unplugin-vue-components 插件会为引入的组件自动生成全局类型文件 components.d.ts，请保留该文件并在 tsconfig.json 中将它添加至 include 字段中。

{
  "include": ["components.d.ts"]
}

[eiinu]

1、Overlay、Popup 等弹层组件的滚动穿透（lockScroll）

• H5：通过在 body 上添加 overflow: hidden 实现
• Taro-H5：通过 Taro 提供的 catch-move 属性实现
• Taro-WEAPP：通过 Taro 提供的 catch-move 属性实现，该属性利用了微信小程序下的一个「trick」，既能阻止冒泡，又能阻止滚动穿透。
• Taro-其他小程序：没有找到合适的实现方式，欢迎 PR

其他小程序中，建议开发者在开启带遮罩层组件的同时，自行设置需要锁定滚动的组件的样式。

[eiinu]

使用组件后，微信小程序无内容，控制台警告找不到 template

可能的原因：开启了 Webpack 预加载或者 cache，Taro 框架下该模式会偶发丢失第三方组件库文件。
建议在 config/index 中将 NutUI 剔除掉：

module.exports = {
  // ...
  compiler: {
    type: 'webpack5',
    prebundle: {
      exclude: ['@nutui/nutui-taro', '@nutui/icons-vue-taro']
    }
  },
  cache: {
    enable: false
  }
}

[eiinu]

出现 [mini-css-extract-plugin] Conflicting order 报错

环境：Taro 小程序

1、如果你的文件中出现了下面这种使用方式，在不同的页面中引入相同样式时的顺序不同，mini-css-extract-plugin 插件将认为这是错误的，因为样式的先后顺序可能会影响实际的表现效果。

// a.js
import 'button.css'
import 'cell.css'

// b.js
import 'cell.css'
import 'button.css'

2、由于 NutUI 项目默认推荐使用 unplugin-vue-components 进行组件代码和样式的引入，实际的引入顺序是该插件根据 template 中标签的使用顺序生成的，无法从外部手动调整组件引入顺序以消除此报错。

NutUI 各个组件的样式之间没有冲突，即其顺序是无关紧要的，所以可以通过以下设置来关闭这种错误提示：

// config/index.js
export default {
  mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true
    }
  }
}