create-react-app 2.0该怎么配置

[shdulu]

No description provided.

[shdulu]

const { override, addWebpackAlias, addPostcssPlugins } = require('customize-cra')
const path = require('path')

module.exports = override(
addWebpackAlias({
'@': path.resolve(__dirname, './src')
})
)
在2.0版本怎么把上面和下面的配置一起啊
1.0版本配置如下：
module.exports = config => {
require('react-app-rewire-postcss')(config, {
plugins: loader => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
require('postcss-aspect-ratio-mini')({}),
require('postcss-px-to-viewport')({
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'], // (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.
}),
require('postcss-write-svg')({
utf8: false
}),
require('postcss-viewport-units')({}), //给CSS的属性添加content的属性
require('cssnano')({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
]
})
return config
}

[sunyxq]

先定义一个方法：

  const pxToVw = () => config => {
  require('react-app-rewire-postcss')(config, {
    plugins: loader => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
      require('postcss-aspect-ratio-mini')({}),
      require('postcss-px-to-viewport')({
        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'], // (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.
      }),
      require('postcss-write-svg')({
        utf8: false
      }),
      //给CSS的属性添加content的属性
      require('postcss-viewport-units')({
        // "silence":true, //静默
        filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1, // filterRule选项过滤掉
      }),
      require('cssnano')({
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      })
    ]
  })
  return config
}

然后在override中调用此方法：

  module.exports = override(
    pxToVw(),
  )

[cat-walk]

先定义一个方法：

  const pxToVw = () => config => {
  require('react-app-rewire-postcss')(config, {
    plugins: loader => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
      require('postcss-aspect-ratio-mini')({}),
      require('postcss-px-to-viewport')({
        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'], // (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.
      }),
      require('postcss-write-svg')({
        utf8: false
      }),
      //给CSS的属性添加content的属性
      require('postcss-viewport-units')({
        // "silence":true, //静默
        filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1, // filterRule选项过滤掉
      }),
      require('cssnano')({
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      })
    ]
  })
  return config
}

然后在override中调用此方法：

  module.exports = override(
    pxToVw(),
  )

感谢，找了好久才找到一个可行的方案。