postcss.config.js 配置(vue移动端自适应)

  安装依赖

 npm install postcss-write-svg  postcss-px-to-viewport-multichange --D

 直接在根目录下创建postcss.config.js

module.exports = {

  plugins: {

    // autoprefixer: {},  // cssnext中启用

    // 'postcss-import': {},

    // 'postcss-url': {},

    // 'postcss-preset-env': {},

    // 'postcss-aspect-ratio-mini': {},

    'postcss-write-svg': { utf8: false },

    'postcss-px-to-viewport-multichange': {

      // 使用非官方开发的可以自定义针对UI库的处理函数的插件

      viewportWidth: 750, // (Number) The width of the viewport.

      viewportHeight: 1334, // (Number) The height of the viewport.

      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.

      viewportUnit: 'vw', // (String) Expected units.

      fontViewportUnit: 'vmin', // (String) Expected units for font.

      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.

      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.

      // selectorBlackList: [

      //   '.ignore',

      //   '.hairlines',

      //   /\.hairline[\w-_]*/,

      //   /\.van-hairline[\w-_]*/,

      // ], // (Array) The selectors to ignore and leave as px.

     

      // 以下为此插件新增配置项

      // exclude: ['node_modules'],

      // multiple: 100,

      // rules: {

      //   path: 'vant',

      //   fn(pixels, translated) {

      //     return `${translated * 2}vw`;

      //   },

      // },

    },

    cssnano: {},

  },

};

重新跑一遍代码

使用vant的没有出现样式问题

再babel.config.js文件中添加

 plugins: [

    [

      'import',

      {

        libraryName: 'vant',

        libraryDirectory: 'es',

        style: name => `${name}/style/less`,

      },

      'vant',

    ],

  ],

添加后发现样式好像变小了，这是因为安装配置了屏幕自适应，只需要再postcss.config.js文件中添加

 rules: {

          path: 'vant',

          fn(pixels, translated) {

            return `${translated * 2}vw`;

          },

        },