Ant-design-mobile: postcss-pxtorem 把我的样式px转为了rem，但是antd-mobile的样式px没有转为rem

[minooo]

本地环境

• antd-mobile 版本：
• windows·：
• chrome最新版：

你做了什么？

引用了antd-mobile的高清方案

你期待的结果是

像官网一样正常显示

实际上的结果：

页面确实“高清了”，但是由于postcss-pxtorem没有把antd-mobile的样式px转为rem，导致ant-m的组件看起来要小一号，但是自己写的组件，样式是正常的（postcss-pxtorem把我样式里的px转为rem了）。

可重现的在线演示

https://github.com/minooo/React-Study/tree/master/step-03

这是我的配置地址，其实问题一句话就是，为什么postcss-pxtorem对antd-mobile的样式px转rem没有生效？ 该如何做？

[zhaotoday]

昨天晚上刚处理好高清问题，可以看看，希望对你有帮助：
https://github.com/zhaotoday/react-antd-mobile
在线 demo 地址：http://996.me/

[minooo]

@zhaotoday 谢谢，刚找到原因了，，，就是因为webpack需要加个这样的配置

{
    test: /\.css$/,
    include: /node_modules/,
    loader: 'style!css!postcss'
},

[SynChron1zed]

你好， {
test: /.css$/,
include: /node_modules/,
loader: 'style!css!postcss'
},
这个配置是在哪个文件里面加

[jiaozhouzhou]

请问这段代码
{
test: /.css$/,
include: /node_modules/,
loader: 'style!css!postcss'
},
是加到webpack.config.js 的哪里呢？

[benjycui]

感觉前端的工作流已经复杂到需要 IDE 托管了。。

[lichengit]

{
test: /.css$/,
include: /node_modules/,
loader: 'style!css!postcss'
},
这段代码加入到webpack.config.js 的什么位置？感觉都没地方放，跪求！

[SynChron1zed]

根本不需要这段代码

[lichengit]

我按照官网的高清方案设置

这是我出来的效果，小了好多倍，是缩放比例太大了吗？

[pingan1927]

@lichengit 如截图，宽度只有375，表明高清方案设置没有生效。https://github.com/ant-design/ant-design-mobile/wiki/HD 再根据wiki仔细推敲下哈

控制台敲下document.documentElement.clientWidth，如果是iPhone6模拟器，由于window.devicePixelRatio值为2，则生成的meta标签为<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">，document.documentElement.clientWidth值为750（跟物理分辨率一样）。

看你的截图，貌似meta标签没动态插入，缺少viewport设置，浏览器则会把宽度设置为980px左右（PC遗留），不是375，不是750，因此结局就如截图一样。

[lichengit]

@pingan1927 以ipone6为基准，控制台输出document.documentElement.clientWidth 为 750，好像是对的，但是还是有这个问题

[fred1218]

对于此类问题，webpack2和3当中，不支持支持在webpackConfig上扩展postcss属性，所以有三个方法

• 一个使用postcssrc,

{
  plugins: {
    "autoprefixer": {
      "remove": false,
      "browsers": [ 'iOS >= 8', 'Android >= 4' ],
    },
    "postcss-pxtorem":{
     rootValue: 100,
     propWhiteList: [],
    }
  }
}

• 一个使用postcss.config.js

module.exports = {
   plugins:{
"autoprefixer": {
      "remove": false,
      "browsers": [ 'iOS >= 8', 'Android >= 4' ],
    },
    "postcss-pxtorem":{
     rootValue: 100,
     propWhiteList: [],
    }
}
}

• [这个好像不行了。。]一个是在postcss-loader的option中使用postcss:()=>[].

 {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                        plugins: () => [
                            autoprefixer({
                               browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
                            }),
                            pxtorem({rootValue: 100, propWhiteList: ['*']})
                        ]
                    }
                },