1.安装所需包
npm install px2rem-loader
npm i -S lib-flexible
2.build/utils.js文件下配置
// build/utils.js文件下配置
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
//这里新加上这段
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //默认换算为1rem为75px,可根据原型图修改
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
//这里将原来的替换
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
3.index.html不需要有name=“viewport”的节点,会自动添加
4.main.js 入口文件中引入 import ‘lib-flexible/flexible.js’;
5.使用过程中注意:
在px后面添加/*no*/,不会转化px,会原样输出。 — 一般border需用这个
在px后面添加/*px*/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个