Skip to content
This repository has been archived by the owner on Jan 16, 2023. It is now read-only.

create-react-app 2.0该怎么配置 #11

Open
shdulu opened this issue Dec 18, 2019 · 3 comments
Open

create-react-app 2.0该怎么配置 #11

shdulu opened this issue Dec 18, 2019 · 3 comments

Comments

@shdulu
Copy link

shdulu commented Dec 18, 2019

No description provided.

@shdulu shdulu changed the title create-react-app 2.0改怎么配置 create-react-app 2.0该怎么配置 Dec 18, 2019
@shdulu
Copy link
Author

shdulu commented Dec 18, 2019

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
Copy link

sunyxq commented Feb 28, 2020

先定义一个方法:

  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
Copy link

先定义一个方法:

  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(),
  )

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants