Vue 项目初始化（二）—— 移动端支持 rem

  Vue 移动端项目使用了 scss 的话，可以设置自动转换 px 为 rem。

¶一、创建项目

vue create my-vue-wap

¶二、Rem support

¶1、安装postcss-pxtorem、amfe-flexible

cnpm i amfe-flexible -S
cnpm i postcss-pxtorem -D

¶2、src/main.js

import 'amfe-flexible'

¶3、vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // before key is 'data', now change to 'prependData'  so this assumes you have a file named `src/variables.scss`
        prependData: `@import "@/assets/stylesheets/mixins/_variables.scss";`
      },
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 效果图375，动态基准值可以传入function
            propList: ['*'], // 属性的选择器，*表示通用
            selectorBlackList: ['.px-'] //   忽略的选择器   .ig-  表示 .ig- 开头的都不会转换
          })
        ],
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {}
      }
    }
  }
}