[Bug Report] vux和px2rem-loader配合，vux组件缩小的问题？有什么好的解决方法吗？

shangguanhonglei commented 6 years ago

VUX version

2.9.2

OS/Browsers version

window7

Vue version

2.5.17

Code

无

Steps to reproduce

无

What is Expected?

具体需要怎么配置才能使px2rem-loader和vux不冲突？

What is actually happening?

具体需要怎么配置才能使px2rem-loader和vux不冲突？

KyLeoHC commented 6 years ago

你用的是哪个版本的px2rem？淘宝的那个移动端适配方案，旧版的那个会缩放viewport，所以会引起这个问题。

shangguanhonglei commented 6 years ago

您好，我用的是： "px2rem-loader": "^0.1.9", 配置代码是： const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } main.js用的是import 'lib-flexible/flexible' 在引用vux插件的时候就会缩小，不知道怎么解决？目前的做法是暂时屏蔽掉了px2remLoader，在编辑器vs code工具里用插件进行px to rem

KyLeoHC commented 6 years ago

@shangguanhonglei 因为淘宝的那个px2rem插件，默认会把所有px单位转换成rem单位(除非你显式声明/ no /)，所以就会出现这个情况，这种情况可以修改或者重写px2rem源码解决(否则就写css强制重置被转换的样式)

wangjinyang commented 6 years ago

我自己写了一个postcss的控件可以实现 vue + webpack +postcss实现，任意第三方库都可以转为vw或者rem布局 postcss-px-to-viewport-lagou .postcssrc.js关键配置如下

"postcss-px-to-viewport-lagou": {
      viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      propertyBlacklist: ['border'],// 指定不转换为视窗单位的属性，可以自定义，可以无限添加,建议定义一至两个通用的类名
      // selectorBlackList: ['.ignore', 'weui'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      selectorBlackList: [],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      LibraryUI: ['vux'],// 使用的第三方ui库
      libraryRoot: 'node_modules',// 使用的第三方ui库，目录
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    },

Leeehuixian commented 6 years ago

@wangjinyang 我安装了你写的控件，但是vux的组件样式依然还是会被改变成rem单位，导致组件显示变小。请问有什么办法避免吗？让rem布局不影响vux等第三方UI组件库。

wangjinyang commented 6 years ago

@wangjinyang 我安装了你写的控件，但是vux的组件样式依然还是会被改变成rem单位，导致组件显示变小。请问有什么办法避免吗？让rem布局不影响vux等第三方UI组件库。

删掉上面的postcss-pxtorem插件，使用npm做包管理器，安装vux，还有问题你上传你的全部代码我看下

Leeehuixian commented 6 years ago

@wangjinyang 删除掉了postcss-pxtorem插件，是用的npm包管理器，vux也安装了，但是问题还是没有解决，页面上引用的组件的css单位还是被替换成了vm { "name": "singleshop", "version": "1.0.0", "description": "A Vue.js project", "author": "lihuixian <lihuixina@jingui.com>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "fastclick": "^1.0.6", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^2.1.1", "vuex-i18n": "^1.3.1", "vux": "^2.2.0" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.11", "eventsource-polyfill": "^0.9.6", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^2.2.3", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-px-to-viewport-lagou": "^1.1.3", "rimraf": "^2.6.0", "sass-loader": "^7.1.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.1.2", "vue-template-compiler": "^2.5.2", "vux-loader": "^1.0.56", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-middleware": "^1.10.0", "webpack-dev-server": "^2.9.1", "webpack-hot-middleware": "^2.16.1", "webpack-merge": "^4.1.0", "yaml-loader": "^0.4.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "iOS >= 7", "Android >= 4.1" ] }

.postcsssrc.js上面已截图全部内容

Leeehuixian commented 6 years ago

@wangjinyang 抱歉没找到评论里上传代码的地方，插入的代码格式也不知为何格式都乱了o(╥﹏╥)o

wangjinyang commented 6 years ago

@wangjinyang 抱歉没找到评论里上传代码的地方，插入的代码格式也不知为何格式都乱了o(╥﹏╥)o

这个插件解决的问题是，当你用rem或者vm布局的时候，第三方库会随着屏幕的大小进行缩放，而不保持第三方库原来的css，px的值；

Leeehuixian commented 6 years ago

@wangjinyang 抱歉没找到评论里上传代码的地方，插入的代码格式也不知为何格式都乱了o(╥﹏╥)o

这个插件解决的问题是，当你用rem或者vm布局的时候，第三方库会随着屏幕的大小进行缩放，而不保持第三方库原来的css，px的值；

好的

ivanlee93 commented 6 years ago

我自己写了一个postcss的控件可以实现 vue + webpack +postcss实现，任意第三方库都可以转为vw或者rem布局 postcss-px-to-viewport-lagou .postcssrc.js关键配置如下

"postcss-px-to-viewport-lagou": {
      viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      propertyBlacklist: ['border'],// 指定不转换为视窗单位的属性，可以自定义，可以无限添加,建议定义一至两个通用的类名
      // selectorBlackList: ['.ignore', 'weui'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      selectorBlackList: [],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      LibraryUI: ['vux'],// 使用的第三方ui库
      libraryRoot: 'node_modules',// 使用的第三方ui库，目录
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    },

非常感谢，这个插件解决了我的问题

Zhujion commented 5 years ago

nice 很棒！前面或许贴代码没有改第三方ui库的目录吗

airyland / vux