简介

为了解决Taro也能够在小程序使用scoped。

Vue SFC 的 <style scoped> 通过 data-v-xxx 属性选择器实现样式隔离,但小程序平台对属性选择器支持不一致,且 Taro 编译过程中可能丢失这些属性,导致 scoped 样式失效。

本插件将 data-v-xxx 属性选择器转换为类名选择器,让 scoped 样式在所有小程序平台正常工作。

特性

• ✅ 纯编译时转换,零运行时开销
• ✅ 兼容所有 Taro 支持的小程序平台
• ✅ 支持 Vue 3 和 Vue 2
• ✅ 支持 CSS / SCSS / Less / Stylus
• ✅ 支持 :deep() / ::v-deep / >>> 深度选择器
• ✅ 不影响非 scoped 样式
• ✅ 只会在小程序端使用，不会影响RN、H5等非小程序

快速开始

安装依赖

npm install taro-scoped-styles --save-dev
# 或
yarn add taro-scoped-styles -D
# 或
pnpm add taro-scoped-styles -D

Taro config文件配置（插件会在编译时自动处理,无需其他配置。）

const config = {
  plugins: ['taro-scoped-styles']
}

兼容性

• ✅ 完美支持 Taro 3.x 和 Taro 4.x
• ✅ Vue 3(推荐)/ Vue 2
• ✅ 所有 Taro 支持的小程序平台

平台识别机制

插件会自动检测编译平台,并仅在以下小程序平台启用:

• 微信小程序 (weapp)
• 支付宝小程序 (alipay)
• 字节跳动小程序 (tt)
• 百度小程序 (swan)
• QQ 小程序 (qq)
• 京东小程序 (jd)

H5 / React Native / Harmony 等平台原生支持 scoped,插件会自动跳过处理。

Taro 版本兼容

插件内部实现了智能平台识别机制:

// Taro 3.x: ctx.runOpts.platform
// Taro 4.x: ctx.runOpts.options.platform
const platform = ctx.runOpts?.options?.platform || ctx.runOpts?.platform || process.env.TARO_ENV;

无论你使用 Taro 3.x 还是 Taro 4.x,插件都能正确识别编译平台。

许可证

MIT