按设计稿一比一开发且自适应屏幕

①安装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