vue-cli3移动端适配和sass全局配置

cnpm install postcss-pxtorem --save-dev //px转换rem
cnpm i -S amfe-flexible //动态变换html字体设置rem基准值

下完这两个插件后在main.js中引入amfe-flexible
import 'amfe-flexible'

在public/index.html的head标签中输入
 <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

在vue.config.js中配置
const pxtorem = require('postcss-pxtorem');

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 37.5,//基准值设为设计稿尺寸/10 因为amfe-flexible会把当前屏幕的10/1设为html根字体
            propList: ['*']
          })
        ]
      },
      // 给 sass-loader 传递选项 配置sass全局样式和变量
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件(全局配置文件)
        data: `@import "@/assets/styles/variables.scss";`
        这里有坑
        sass-loader v8-，这个选项名是 "data"
        sass-loader v8 中，这个选项名是 "prependData"
        sass-loader v10+，这个选项名是 "additionalData"
      }
    }
  }
};