解决Taro开发小红书小程序样式失效问题

1,235 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情

背景介绍

最近开发小红书小程序的经历可谓是痛不欲生,经历了各种深不见底的深坑,艰难的爬出来了。这里先介绍一下背景,由于之前公司业务涉及到微信小程序、支付宝小程序等,所以有关小程序的开发框架统一使用的是Taro,这也是开发小红书小程序的痛苦的开始。

经过简单的调研发现,小红书小程序的官方也在Taro3的基础上开发出了用来兼容小红书小程序的插件 @tarojs/plugin-platform-xhs,这也就意味Taro3.x的版本是支持进行小红书小程序的开发的。具体的开发环境配置和准备工作这里就不多说了,大家可以自行前往小红书开放平台查看。

问题描述

问题的表象:组件内引入的css样式不生效,没有成功作用于组件之上。

组件dome代码:

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  render () {
    return (
      <View className='test'>
        <Text>Hello world test---------------!</Text>
      </View>
    )
  }
}

组件样式代码:

.test {
  height: 100%;
  background: #0ff;
  color: red;
}

最终呈现的结果:

image.png

问题修复之路

第一次出手

初步怀疑:有可能是小红书编译过程导致样式丢失或者匹配失败

怀疑理由:之所以这样怀疑,是因为,我在排查的过程中,发现渲染出来的样式名,不是我定义的className,而是被处理过的className,所以我猜想有没有可能是编译过程中导致没些转换规则跟预期不符呢?

image.png

通过截图可以看出,小红书最终渲染的样式是带有小红书前缀的。

经过多番尝试,最终没有证实是这个问题,也没有找到解决的方法,开始自我怀疑。

第二次尝试

经过一段时间的冷静和调整,觉得是找错方向了,因为发现一部分组件的样式是可以渲染出来的,另外一部分组件的样式是丢失的。

再次怀疑:有没有可能是组件名字的锅呢?

再次莽起来,经过多次尝试,发现好像跟名称没关系,有些组件即使名字起的很生僻依然渲染不出样式来。

头疼,难搞的有点不讲道理。

最终猜测

经过一次意外的样式搜索,发现部分组件丢失的样式存在于common.css这个文件中

image.png

这就有点意思了,有没有可能是common.css的问题呢?common.css是如何引入到项目里面的呢?有没有可能是common.css文件引入错了呢?

抱着这几个疑问开始了探索,最终在app.css中发现了这么一段代码:

...

.text-cursor {
  cursor: point;
}

/*# sourceMappingURL=app.css.map*/
@import "./common.css";

好家伙,原来如此,还是common.css的锅哈!

我将 @import "./common.css"; 移动到代码的最上方然后一看,果然好了。

image.png

揭秘

这个问题产生是由于小红书小程序使用的是css来作为样式文件导致的。对于Taro来说,会将公共的样式按照规则提取到common.css文件中来,然后统一注入app.css文件的底部,使用@import的方式引入。这对于css来说,就悲剧了,这里我就直接引MDN里面的原话来说明:

@import CSS@规则,用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,@charset 规则除外; 因为它不是一个嵌套语句,@import 不能在条件组的规则中使用。

好了,到这里就ko了,欢迎大家在下方进行留言讨论。