postcss-px-to-viewport 的使用教程

安装 postcss-px-to-viewport

npm install postcss-px-to-viewport —save-dev

配置文件说明 postcss.config.js

module.exports = {
  plugins: {
    // "postcss-px2rem-exclude": {
    //   "remUnit": 192,
    //   "exclude": /node_modules|src/i
    // },
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 需要转换的单位，默认为"px"
      viewportWidth: 1920, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ["*"], // 能转化为vw的属性列表，可以使用通配符的方式配置，例如['position*']
      viewportUnit: "vw", // 希望使用的视口单位
      fontViewportUnit: "vw", // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位，注意如果传入[""]则都不进行转换了
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, // 是否直接更换属性值，而不添加备用属性
      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' ，如果传入的值是一个数组，那么数组里的值必须为正则
      // include: [], // 如果设置了，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 include: /\/src\/mobile\//
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的单位
      landscapeWidth: 568, // 横屏时使用的视口宽度
    },
  },
};

使用PostCss配置文件时

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
    }
  }
}

在gulp中使用

package.json

{
  "name": "postcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-postcss": "^9.0.1",
    "postcss-px-to-viewport": "^1.1.1"
  }
}

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px-to-viewport');
gulp.task("css", (cd) => {
    console.log("css")
    // 将你的默认的任务代码放在这
    var processors = [
        pxtoviewport({
            unitToConvert: "px",
            viewportWidth: 1920,
            unitPrecision: 5,
            propList: ["*"],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [], // 写成selectorBlackList: [""] 就所有的都不进行转换了
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: [/node_modules/],
            landscape: false,
            landscapeUnit: "vw",
          })
    ];
    return gulp.src(['./css/**/*.scss'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
})
gulp.task("auto", (cd) => {
    console.log("auto");
    cd();
})
gulp.task('default', gulp.series('css', 'auto', (done) => {
    console.log("success");
    done();
}));

利用注释阻止转化

● /* px-to-viewport-ignore-next */ — 在单独的行上，防止在下一行上转换。
● /* px-to-viewport-ignore */ — 在右侧的属性之后，阻止在同一行上进行转换。
/* example input: */
.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
  border: solid 2px #000; /* px-to-viewport-ignore */
}
/* example output: */
.class {
  width: 10px;
  padding: 3.125vw;
  height: 10px;
  border: solid 2px #000;
}