先介绍用到的两个工具:
px2rem-loader
:将css中的px转为rem单位,用了它就不用自己计算rem值了
lib-flexible
:根据设备宽度,修改根元素html的font-size,以适配不同终端
配置
- 安装1:
npm i px2rem-loader --save -dev
- 安装2:
npm i lib-flexible --save
- 配置1:入口文件main.js中引入:
import 'lib-flexible/flexible.js'
- 配置2:
build/utils.js
中:
// exports.cssLoaders内增加:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // 设计稿宽度/10
}
}
// function generateLoaders前增加:
...
function generateSassResourceLoader() {
var loaders = [
cssLoader,
postcssLoader,
px2remLoader,
//