①安装less loader
cnpm install less less-loader --save-dev
在build目录下的webpack.base.conf.js 下配置loader
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
②安装lib-flexible插件
cnpm i lib-flexible --save
main.js 里 引入 lib-flexible
对flexible.js进行更改
③安装px2rem-loader
cnpm i px2rem-loader --save-dev
build目录下的utils.js添加如下配置
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 192
}
}
关于px2rem的写法,
直接写px,编译后会直接转化成rem ---- 除开下面两种情况,其他长度用这个
在px后面添加/no/,不会转化px,会原样输出。 — 一般border需用这个
在px后面添加/px/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个
本文参考链接:https://web03.cn/blog/68