标签：插件 vue 端自 px Number units postcss viewport

  安装依赖

 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: {},

  },

};

重新跑一遍代码

标签：插件,vue,端自,px,Number,units,postcss,viewport
来源： https://blog.csdn.net/Squirrelworker/article/details/121495204

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。