1. 安装:
npm install lib-flexible postcss-pxtorem -S
2. 引入
在项目入口文件index.js引入lib-flexible
import 'lib-flexible';
3. 修改webpack.config.js
3.1 初始化配置
npm run eject
这时候可能会报错
解决方案
git init
git add .
git commit -m 'init'
3.2. 修改webpack.config.js
先引入:
const pxtorem = require('postcss-pxtorem')
然后找到postcss-loader 替换一下,注释的部分加入
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
postcssNormalize(),
// 新增加---------------------------------------------
pxtorem({
rootValue: 37.5,
propWhiteList: [],
minPixelValue: 2,
exclude: /node_modules/i
})
//--------------------------------------------------
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
这时候会报错可能是版本过高
解决思路:
https://www.cnblogs.com/liangziaha/p/14492288.html
解决方案:
npm i postcss-pxtorem@5.1.1