2018年是我感觉是前端的插件年，在css方面，postcss的插件也是刚刚的，无论是autoprefixer,还是postcss-cssnext等一系列方面，今天刚好做一个移动端新项目，特意请教了手淘团队，出了一个新方案，开始抛弃使用Flexible实现手淘H5页面的终端适配,使用vw布局方案，关于vue-cli使用的配置已经有讲解，我就讲讲create-react-app的配置
具体的内容原因请下以面链接
配置方面就不用说了，如何用creat-react-app生成一个项目，运行起来,请看以下链接
https://reactjs.org/docs/forms.html
直接进入如何配置
生成项目后，直接进行 webpack.config.dev.js,配置开发环境配置找到这段代码
{ loader: require.resolve('postcss-loader'), options: { config: { path: 'postcss.config.js' // 这个得在项目根目录创建此文件 }, // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss' // plugins: () => [ // require('postcss-flexbugs-fixes'), // autoprefixer({ // browsers: [ // '>1%', // 'last 4 versions', // 'Firefox ESR', // 'not ie < 9', // React doesn't support IE8 anyway // ], // flexbox: 'no-2009', // }), // ], }, },复制代码 create-react-app 自己配置了，内联的autoprefixer,把它注示掉，然后在options里加指向的配置地址，把所有的plugins插件配置全放入一个在项目根目标的postcss.config.js,通过postcss解析的时候自然会运行这些差件，因为运用大量的配置，在生产环境同样要同到，进行一个共同配置。
在配置之前先下一些包
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --D复制代码
postcss.config.js配置
module.exports = { "plugins": [ require('postcss-flexbugs-fixes'), require("autoprefixer")({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), require("postcss-aspect-ratio-mini"), require("postcss-write-svg")({ utf8: false }), require("postcss-cssnext"), require("postcss-px-to-viewport")({ viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }), require("postcss-viewport-units"), require("cssnano")({ preset: "advanced", autoprefixer: false, "postcss-zindex": false }) ]}复制代码 以上的配置原理还是请到
require('postcss-flexbugs-fixes'), require("autoprefixer")({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }),复制代码 为了不破坏整体性还是把create-react-app原本的差件搬过来。关于postcss的配置就结束了
改一下public/index.html
React App 复制代码
引入 viewport-units-buggyfill.hacks的ali cdn 再初始化执行init方法
ok此时配置完成，运行 npm start
注意几点： viewportWidth: 750 可以当作是iphone6的视口度，你的设计图也要是750的比例，也是移动端的标准设计比。正常的用px,最后会／2进行一个比例换算。
解决安桌机0.5px线的问题，需要通过postcss-write-svg,对于我这种不懂svg的，是一个很奇秒的设计， 示例请看原作者。
当你写好之后，发现chrome 控制台是换成了vw，就是成功了，如果设置了最小转化值minPixelValue: 1,说明小于等于1px的不进行vw的转换。
在生产环境webpack.production.config.js中，与dev也是同样的配置。