postcss-mobile-forever版本4.1.2在 Vue3 vite5 配置不生效

[wukongyang]

在vite.config.js配置如下

[wswmsword]

您试着调换一下 PostCSS 的插件顺序，我记得插件执行的顺序是从后向前的，所以 tailwindcss 应该放在最后，类似这样：

css: {
  postcss: {
    plugins: [
-     tailwindcss,
      autoprefixer,
-     loader_pxtovw,
      posMobile({
        viewportWidth: 375,
        maxDisplayWidth: 580,
        appSelector: "#mobile"
      }),
+     tailwindcss,
    ]
  }
}

这里面有个 loader_pxtovw 插件我不清楚作用，估计是和 mobile-forever 作用重叠的，也给你取掉了，您试试这么改完看看效果是什么样的。

[luckyAisen]

@wswmsword

我发现一些奇怪的现象，例如：

❌ maxDisplayWidth 属性不生效 ：

html,
body,
#app {
  height: 100%;
  font-family: var(--van-base-font);
  font-size: 28px;
  background-color: var(--app-theme-background-color-body);
  color: var(--app-theme-text-color-1);
}

❌ maxDisplayWidth 属性不生效 ：

html,
body {
  height: 100%;
  font-family: var(--van-base-font);
  font-size: 28px;
  background-color: var(--app-theme-background-color-body);
  color: var(--app-theme-text-color-1);
}

#app {}

✅ maxDisplayWidth 属性生效 ：

html,
body {
  height: 100%;
  font-family: var(--van-base-font);
  font-size: 28px;
  background-color: var(--app-theme-background-color-body);
  color: var(--app-theme-text-color-1);
}

#app {
+ height: 100%;
}

appSelector 一定要在样式中定义并且赋值，maxDisplayWidth 才生效

postcss.config.js 配置：

export default {
  plugins: {
    'postcss-mobile-forever': {
      viewportWidth: (file) => (file.includes('node_modules/vant') ? 375 : 750),
      maxDisplayWidth: 600,
      propertyBlackList: {
        '.van-icon': 'font'
      },
      rootContainingBlockSelectorList: ['van-tabbar']
    }
  },
  tailwindcss: {},
  autoprefixer: {}
};

[wswmsword]

@Aisen60 appSelector 是需要在样式中定义，而且和样式中的选择器是全等匹配，不过不一定需要赋值，如果是需要赋值才能生效，是不是项目里有其它插件在 mobile-forever 之前做了消除空选择器样式代码优化产包的操作。

前两个“❌ maxDisplayWidth 属性不生效” 的例子没看懂，是说 font-size: 28px; 没有被转换的意思吗？

[luckyAisen]

@Aisen60 appSelector 是需要在样式中定义，而且和样式中的选择器是全等匹配，不过不一定需要赋值，如果是需要赋值才能生效，是不是项目里有其它插件在 mobile-forever 之前做了消除空选择器样式代码优化产包的操作。

前两个“❌ maxDisplayWidth 属性不生效” 的例子没看懂，是说 font-size: 28px; 没有被转换的意思吗？

嗯嗯，应该是有其他插件做了消除空选择器样式代码优化