转 web 时 scss 通过 additionalData 引入的全局变量 px 不会被转化为 vw 或 rem

[soulmate126]

转web时通过 css.loaderOptions.scss.additionalData引入全局变量

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

// styles/var.scss
$--fs-xs: 14px;

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

输出

应改转化为对应的 vw单位

mpx-project-2.9 2.zip

[yandadaFreedom]

样式单位转换需要给 @mpxjs/webpack-plugin 插件配置 transRpxRules 转换规则，输出小程序可以将 px 转成 rpx，输出 web可以将 px 转成 vw， 具体配置可参考 https://mpxjs.cn/api/compile.html#transrpxrules