在React中使用postcss和postcss插件解决移动端自适应

基于create-react-app 脚手架安装项目

>首先因为需要更改 webpack 配置

所以需要 npm run eject

把文件全部释放出来

然后使用 postcss-pxtorem 或者vm vw的插件 看自己喜好吧

安装以下依赖项：

"devDependencies": {2 "css-loader": "^1.0.0",3 "postcss": "^7.0.2",4 "postcss-import": "^12.0.0",5 "postcss-loader": "^2.0.8",6 "postcss-pxtorem": "^4.0.1",7 "style-loader": "^0.23.0"8 },

安装完成后 找到config目录

找到webpack.config.dev.js和webpack.config.prod.js

找到以下代码

{
loader: require.resolve('postcss-loader'),
options: {// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: ()=> [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9',// React doesn't support IE8 anyway],
flexbox:'no-2009',
}),
require('postcss-pxtorem')({
rootValue:32,
unitPrecision:5,
propList: ['*'],
selectorBlackList: [],
replace:true,
mediaQuery:false,
minPixelValue:12
})
],
},

要注意的是 这段代码就是我们要加上的

require('postcss-pxtorem')

({
rootValue:32,

unitPrecision:5,

propList: ['*'],

selectorBlackList: [],

replace:true,

mediaQuery:false,

minPixelValue:12

如果是750的设计稿 那么rootValue就是32 图上多少px就写多少px

 >>>个人博客 https://magiczhuzhu.club