Mpx项目中SCSS全局变量单位转换问题解析

在使用Mpx框架进行多端开发时，开发者可能会遇到一个关于样式单位转换的常见问题：通过additionalData引入的SCSS全局变量中的px单位在Web端没有被自动转换为vw或rem单位。

问题背景

在Mpx项目中，开发者通常会使用SCSS预处理器来编写样式代码。为了保持代码的可维护性，常常会将一些常用的样式值（如字体大小、间距等）提取到全局变量文件中。在Vue/Webpack配置中，可以通过css.loaderOptions.scss.additionalData选项来全局注入这些变量。

问题现象

当项目中配置了如下代码时：

// vue.config.js
module.exports = defineConfig({
  css: {
    loaderOptions: {
      scss: {
        additionalData: '@import "@/styles/var.scss";'
      }
    }
  }
})

其中var.scss文件定义了：

$--fs-xs: 14px;

在组件中使用这个变量：

<style lang="scss">
.list{
  font-size: $--fs-xs;
}
</style>

开发者期望在Web端输出时，14px能够被自动转换为vw或rem单位，但实际上输出的仍然是原始的px值。

原因分析

这个问题出现的原因是Mpx的样式单位转换机制工作于SCSS变量解析之前。样式处理器会先处理SCSS变量，将其替换为具体的值，然后才会进行单位转换。因此，当变量中的px值被替换到样式规则中时，转换器已经无法识别这些值原本是应该被转换的。

解决方案

要解决这个问题，开发者需要在Mpx的Webpack插件配置中明确指定单位转换规则。Mpx提供了transRpxRules配置项，用于定义如何转换样式中的单位。

对于Web端输出，可以配置将px转换为vw单位。配置示例如下：

// 在webpack配置中
{
  plugins: [
    new MpxWebpackPlugin({
      transRpxRules: [
        {
          mode: 'only',
          comment: 'use px',
          include: () => true,
          designWidth: 750,  // 设计稿宽度
          deviceRatio: {
            750: 1/7.5  // 750设计稿对应1/7.5的vw比例
          }
        }
      ]
    })
  ]
}

最佳实践

1. 明确设计稿尺寸：在配置转换规则时，应该根据项目使用的设计稿尺寸来设置designWidth参数。

2. 保持单位一致性：建议在项目中统一使用px作为开发时的单位，通过构建工具自动转换为目标平台所需的单位。

3. 特殊场景处理：对于确实需要固定像素值的场景，可以使用特殊注释来排除转换，例如：

   /* use px */
   .fixed-size {
     width: 100px;
   }
   

4. 测试验证：在配置完成后，应该在不同设备和屏幕尺寸下测试样式表现，确保转换结果符合预期。

总结

Mpx框架提供了强大的多端样式适配能力，但需要开发者正确配置转换规则。理解样式处理流程中各阶段的执行顺序对于解决类似问题非常重要。通过合理配置transRpxRules，开发者可以确保项目中无论是直接编写的px值还是通过SCSS变量引入的px值，都能被正确转换为目标平台所需的相对单位。