在vue项目中安装使用lib-flexible

1.安装flexible

npm install lib-flexible --save

2.引入flexible

在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

3.px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

4.安装px2rem-loader

npm install px2rem-loader --save-dev

5.配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

minimize: process.env.NODE_ENV === 'product',

const px2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUnit:75

    }

  }

const loaders = options.usePostCSS ? [cssLoader, px2remLoader,postcssLoader] : [cssLoader]

是否需要配置importLoaders，其不配置的时候正常，就别配置了23333

重启项目，就可以愉快的用设计稿上的px了！

/* px2rem不能正常转换 */@import'../assets/style.css';

/* px2rem不能正常转换 */@importurl('../assets/style.css');