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中使用<template><view:class="$style.container">Hello</view></template><style lang="scss"scoped>.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. 使用
跟之前正常使用即可
<template><viewclass="container">Hello</view></template><style scoped>.container{padding:20px;color:red;}</style>兼容性说明
- Taro 版本:完美支持 Taro 3.x 和 Taro 4.x
- Vue 版本:Vue 3(推荐)/ Vue 2 均可
- 小程序平台:微信、支付宝、字节、百度、QQ、京东全覆盖
- 非小程序平台:H5 / React Native / Harmony 原生支持 scoped,插件会自动跳过,不做多余处理