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

lurenjiazrj 2018-09-25 原文

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

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

所以需要 npm run eject

把文件全部释放出来

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

安装以下依赖项：

1 "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