postcss-px-to-viewport

Question

postcss-px-to-viewport 行内样式不转换改怎么办？

Answer 1

如果你使用 postcss-px-to-viewport 这个 PostCSS 插件，但是希望某些行内样式不被转换，你可以使用插件提供的 exclude 选项来排除特定的文件或目录，或者使用特定的注释来标记需要排除的样式。

在配置文件中添加 exclude 选项：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false,
      exclude: /node_modules|foldername/i  // 通过正则表达式排除特定文件或目录
    }
  }
}

另外，你也可以在需要排除的行内样式中添加注释 /no-vw/ 或者 /no-convert/，这样插件就会忽略这些行内样式的转换。

<div style="width: 100px; /*no-vw*/">...</div>

使用这些方法可以帮助你控制哪些样式需要被转换，哪些样式需要被排除。