sunyxq
commented
4 years ago 先定义一个方法：
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 { 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 }