vw 适配,简单配置,一劳永逸,高可靠的还原设计师的稿子,给你底气和设计师对标UI。 该demo 为vw 适配方案 react 16 && react-router-dom 4+ 搭配使用,一个多页面路由项目
步骤:
-
创建项目 && 初始化
create-react-app react-vw-layout cd react-vw-layout
-
开启我们的配置之路&&简单配置
react 把配置都隐藏了,需要我们手动来显示配置
npm run eject
//Are you sure you want to eject? This action is permanent. (y/N) y
之后可以看到 config文件 && scripts 文件夹 -
安装我们需要配置用到的插件(建议使用cnpm)
npm install --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
-
开始配置
在config/webpack.config.js 中修改代码
//配置vw const postcssAspectRatioMini = require('postcss-aspect-ratio-mini'); const postcssPxToViewport = require('postcss-px-to-viewport'); const postcssWriteSvg = require('postcss-write-svg'); // const postcssCssnext = require('postcss-cssnext'); const postcssPresetEnv = require('postcss-preset-env'); const postcssViewportUnits = require('postcss-viewport-units'); const cssnano = require('cssnano');
{ // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve('postcss-loader'), options: { // Necessar