create-react-app 引入antd-mobile，配置vw

1、配置vw

create-react-app建立工程

create-react-app mypro
npm run eject
           

安裝依賴

安裝成功後，配置webpack.config.js

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini')
const postcssPxToViewport = require('postcss-px-to-viewport-opt')
const postcssWriteSvg = require('postcss-write-svg')
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: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // 新增postCss配置
            postcssAspectRatioMini({}),
            postcssPxToViewport({
              viewportWidth: 750, // (Number) The width of the viewport.
              viewportHeight: 1334, // (Number) The height of the viewport.
              unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
              viewportUnit: 'vw', // (String) Expected units.
              selectorBlackList: ['.ignore', '.hairlines', '.antd'], // (Array) The selectors to ignore and leave as px.
              minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
              mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
              exclude: /(\/|\\)(node_modules)(\/|\\)/
            }),
            postcssWriteSvg({
              utf8: false
            }),
            postcssPresetEnv({}),
            postcssViewportUnits({}),
            cssnano({
              'cssnano-preset-advanced': {
                zindex: false,
                autoprefixer: false
              }
            }),
            // 新增postCss配置結束
            
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
           

在這裡要特别注意，網上有很多教程需要安裝postcss-cssnext插件，這個插件安裝後，打包會報throw new BrowserslistError('Unknown browser query ’ + selection + ‘’) BrowserslistError: Unknown browser query dead這樣的錯誤

這裡我們需要用postcss-cssnext替換為 postcss-preset-env ， postcss-px-to-viewport替換為postcss-px-to-viewport-opt以避免相關報錯

最後再public/index.html中引入代碼解決低版本相容問題，這樣npm start就可以愉快的使用vw了

2、引入antd-mobile

安裝依賴

在package.json中babel中添加

"plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]