Taro + Vue 在小程序里用上 scoped 样式

头疼用 Taro 开发小程序时,如果你选了 Vue 技术栈,大概率会遇到一个头疼的问题:style scoped在小程序里不生效。Vue SFC 的 scoped 原理是给元素加上data-v-xxx属性,再用属性选择器做样式隔离。但小程序平台对属性选择器的支持参差不齐,加上 Taro 编译对小程序的限制,最终导致 scoped 样式直接失效。在用Taro Vue开发小程序时头疼无法使用scoped样式而是得用Taro官方介绍的 module 去编写这种写法太麻烦了// 得去config/index配置cssModules:{enable:true,// 默认为 false如需使用 css modules 功能则设为 trueconfig:{namingPattern:module,// 转换模式取值为 global/module下文详细说明generateScopedName:[name]__[local]___[hash:base64:5],},};// vue中使用templateview:class$style.containerHello/view/templatestyle langscssscoped.container{padding:20px;color:red;}/style今天分享一个刚开源的小插件taro-scoped-styles,专门来填这个坑。它做了什么一句话概括:把data-v-xxx属性选择器转换成类名选择器,让 scoped 样式在所有小程序平台都能正常工作。转换在编译阶段完成,零运行时开销,装上即用,不用改业务代码。主要特性纯编译时转换,零运行时开销兼容所有 Taro 支持的小程序平台支持 Vue 3 和 Vue 2支持 CSS / SCSS / Less / Stylus支持:deep()/::v-deep/深度选择器不影响非 scoped 样式仅在小程序端生效,不会干扰 RN、H5 等平台如何使用1. 安装npminstalltaro-scoped-styles --save-dev# 或yarnaddtaro-scoped-styles-D# 或pnpmaddtaro-scoped-styles-D2. 配置在 Taro 的配置文件里加上插件即可,无需其他额外配置:constconfig{plugins:[taro-scoped-styles]}编译时插件会自动处理,开箱即用。3. 使用跟之前正常使用即可templateviewclasscontainerHello/view/templatestyle scoped.container{padding:20px;color:red;}/style兼容性说明Taro 版本:完美支持 Taro 3.x 和 Taro 4.xVue 版本:Vue 3(推荐)/ Vue 2 均可小程序平台:微信、支付宝、字节、百度、QQ、京东全覆盖非小程序平台:H5 / React Native / Harmony 原生支持 scoped,插件会自动跳过,不做多余处理