安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件(有更新postcss弃用,附带vite.config.ts文件)

安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件(有更新postcss弃用,附带vite.config.ts文件)

大祥子
2021-10-30 / 0 评论 / 3,098 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年08月17日,已超过783天没有更新,若内容或图片失效,请留言反馈。

2022年6月6日vite编译显示插件弃用

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration

解决方式:
1、安装新的postcss-px-to-viewport-8-plugin

npm install postcss-px-to-viewport-8-plugin --save-dev
其他配置如下
也可以新建:
  module.exports = {
    plugins: {
      'postcss-px-to-viewport-8-plugin': {
        unitToConvert: 'px', // 需要转换的单位,默认为"px"
        viewportWidth: 750, // 设计稿的视口宽度
        unitPrecision: 5, // 单位转换后保留的精度
        propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
        viewportUnit: 'vw', // 希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
        // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
        // 下面配置表示类名中含有'keep-px'都不会被转换
        selectorBlackList: ['keep-px'], 
        minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, //  是否直接更换属性值,而不添加备用属性
        exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
        include: [/src/], // 如果设置了include,那将只有匹配到的文件才会被转换
        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
        landscapeUnit: 'vw', // 横屏时使用的单位
        landscapeWidth: 1338, // 横屏时使用的视口宽度
      },
    },
  };

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';

const resolve = str => path.resolve(__dirname, str)

export default defineConfig(({ mode }) => {
  const ENV = loadEnv(mode, __dirname)
  const IS_DEV = ENV.VITE_APP_ENV !== 'production'
  return {
    base: './',
    resolve: {
      alias: {
        '@': resolve('src'),
        '@components': resolve('src/components'),
        '@utils': resolve('src/utils'),
        '@views': resolve('src/views'),
        '@assets': resolve('src/assets')
      },
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    build: {
      // 公共路径(必须有的,不然打包css和js路径问题不加载)
      publicPath: './',
      // 打包构建输出路径
      outDir: 'dist',
      // 生成静态资源的存放路径
      assetsDir: 'static',
      // 构建后是否生成 source map 文件
      sourcemap: IS_DEV,
      // chunk 大小警告的限制
      chunkSizeWarningLimit: 700,
      // 生产环境移除 console
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: !IS_DEV,
          drop_debugger: !IS_DEV
        }
      },
      rollupOptions: {
        output: {
          manualChunks: {
            vlib: ['vue', 'vue-router', 'vuex']
          }
        }
      }
    },
    server: {
      port: 8088,
      open: true,
      proxy: {
        '/api': 'http://127.0.0.1:3000'
      },
      cors: true
    },
    css: {
      // 处理打包出现警告 "@charset" must be the first
      postcss: {
        plugins: [
          /* require('postcss-px-to-viewport-8-plugin')({ 
           * 2022年8月17日更新,使用require('postcss-px-to-viewport-8-plugin')引入
           * vite报错:error when starting dev server:Error: 
           * Dynamic require of "postcss-px-to-viewport-8-plugin" is not supported
           * 故此改为postcsspxtoviewport8plugin({
          */
          postcsspxtoviewport8plugin({
            unitToConvert: 'px', // 需要转换的单位,默认为"px"
            viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度,一般是1920
            // viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度
            unitPrecision: 6, // 单位转换后保留的精度
            propList: [
              // 能转化为vw的属性列表
              '*'
            ],
            viewportUnit: 'vw', // 希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: ['el-switch', 'is-checked'], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。cretae
            minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
            mediaQuery: false, // 媒体查询里的单位是否需要转换单位
            replace: true, // 是否直接更换属性值,而不添加备用属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
          }),
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: atRule => {
                if (atRule.name === 'charset') {
                  atRule.remove()
                }
              }
            }
          }
        ]
      }
    },
    plugins: [
      vue()
    ],
  }
})

安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 [PostCSS](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fpostcss%2Fpostcss) 插件.
npm install postcss-px-to-viewport --save-dev
相应配置参数
{
  unitToConvert: "px", // 默认值`px`,需要转换的单位
  viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
  viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置
  unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
  propList: ["*"], // 转化为vw的属性列表
  viewportUnit: "vw", // 指定需要转换成视窗单位
  fontViewportUnit: "vw", // 字体使用的视窗单位
  selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
  mediaQuery: false, // 允许在媒体查询中转换`px`
  minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
  replace: true, // 是否直接更换属性值而不添加备用属性
  exclude: [], // 忽略某些文件夹下的文件或特定文件
  landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
  landscapeUnit: "vw", // 横屏时使用的单位
  landscapeWidth: 1134 // 横屏时使用的视窗宽度
}
  unitToConvert: "px", // 默认值`px`,需要转换的单位
  viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
  viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置
  unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
  propList: ["*"], // 转化为vw的属性列表
  viewportUnit: "vw", // 指定需要转换成视窗单位
  fontViewportUnit: "vw", // 字体使用的视窗单位
  selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
  mediaQuery: false, // 允许在媒体查询中转换`px`
  minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
  replace: true, // 是否直接更换属性值而不添加备用属性
  exclude: [], // 忽略某些文件夹下的文件或特定文件
  landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
  landscapeUnit: "vw", // 横屏时使用的单位
  landscapeWidth: 1134 // 横屏时使用的视窗宽度
430

评论 (0)

取消