1.安裝依賴：
cnpm i px2rem-loader lib-flexible -D
2.配置：
{
test:/\.css/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'px2rem-loader',
options:{
remUnit:75, //75代表1rem
remPrecision:8 //保留小數點後多少位
}
}
]
}
3.我們需要在html中引入計算根元素的js模塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/lib-flexible/flexible.js"></script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<p>我的世界</p>
<div></div>
</body>
</html>
配置完成，打包即可。
下面我們來對比轉換前後的變化
轉換前：
body{
border: 1px solid red;
width: 100%;
}
div{
width: 375px;
height: 200px;
background: red;
}
轉換後：
body {
border: 0.01333333rem solid red;
width: 100%;
}
div {
width: 5rem;
height: 2.66666667rem;
background: red;
}
