wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
325 stars 19 forks source link

vue3+tsx使用插件好像没生效,帮忙看下哈 #11

Open MaoSkin opened 1 year ago

MaoSkin commented 1 year ago

归档.zip

wswmsword commented 1 year ago

10 嗯,这个可能是 vite 配置的问题,元素的选择器被 vite 转成了 ._container_16a3w_1,插件生成的媒体查询的选择器还是原来的 .container,vite 没有把插件生成的媒体查询的选择器重命名成 ._container_16a3w_1,这个我再看看。

着急出效果的话可以用下面的配置:

module.exports = {
  plugins: [
    require("postcss-mobile-forever")({
      landscapeWidth: 450,
      maxDisplayWidth: 600,
      disableLandscape: true,
      disableDesktop: true,
      rootSelector: ".root-class",
    }),
  ],
};

这个配置不会生成媒体查询,一样限制最大宽度。

MaoSkin commented 1 year ago

10 嗯,这个可能是 vite 配置的问题,元素的选择器被 vite 转成了 ._container_16a3w_1,插件生成的媒体查询的选择器还是原来的 .container,vite 没有把插件生成的媒体查询的选择器重命名成 ._container_16a3w_1,这个我再看看。

着急出效果的话可以用下面的配置:

module.exports = {
  plugins: [
    require("postcss-mobile-forever")({
      landscapeWidth: 450,
      maxDisplayWidth: 600,
      disableLandscape: true,
      disableDesktop: true,
      rootSelector: ".root-class",
    }),
  ],
};

这个配置不会生成媒体查询,一样限制最大宽度。

好的,谢谢了

wswmsword commented 1 year ago

https://github.com/vitejs/vite-plugin-vue/issues/200