在VS Code中 “postcss-pxtorem的ignore”被“prettier格式化“干废了背景： postc

背景：

postcss 可以将px的转化为rem
postcss 可以利用PX的大写来进行忽略转化
VS Code中的prettier插件默认会将大写的PX格式化为小写的px，如何化解

postcss.config

postcss 可以将px的转化为rem

const commonValue = 750;

module.exports = {
  plugins: {
    // NOTE： 如使用 vw 兼容方案打开以下注释代码 注释rem相关代码
    // 'postcss-px-to-viewport': {
    //   viewportWidth: commonValue,
    // },

    // NOTE： 如使用 rem 兼容方案打开以下注释代码 注释viewport相关代码
    'postcss-pxtorem': {
      rootValue({ file }) {
        return commonValue / 10;
      },
      propList: ['*'],
      exclude: /node_modules/i, // 排除node_modules
    },
    // end 'postcss-pxtorem'
  },
};

scss文件

postcss 可以利用PX的大写来进行忽略转化

VS Code中的prettier插件默认会将大写的PX格式化为小写的px，如何化解？

利用prettie的ignore特性 // prettier-ignore

/** 测试postcss在.scss文件中px的转换 */
// `px` is converted to `rem`
.test-padding {
  padding: 100px; // converted to rem
}
// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers
.ignore {
  // prettier-ignore
  border: 1Px solid;
  // prettier-ignore
  border-width: 2PX;
}