postcss-pxtorem在哪里进行配置

在使用postcss-pxtorem时，一般会在项目的根目录下创建一个名为postcss.config.js的文件进行配置。在这个配置文件中，你可以指定需要转换的CSS文件、转换的单位、转换的倍数等选项。以下是一个简单的配置示例：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 设计稿宽度的1/16
      unitPrecision: 5, //保留小数位数
      propList: ['*'], //需要转换的属性，*表示全部
      selectorBlackList: [], //需要忽略的选择器
      replace: true,
      mediaQuery: false,
      minPixelValue: 0 //需要转换的最小像素值
    })
  ]
}

其中，rootValue表示设计稿的宽度，propList表示需要转换的属性，selectorBlackList表示需要忽略的选择器，minPixelValue表示需要转换的最小像素值等。你可以根据自己的需求来进行配置。

相关问题

vue 安装了postcss-loader 并配置了 postcss-pxtorem ，然后删除了postcss-loader和postcss-pxtorem,项目再启动会报错Loading PostCSS "postcss-pxtorem" plugin failed: Cannot find module 'postcss-pxtorem'

如果你在安装了 `postcss-loader` 和 `postcss-pxtorem` 后又删除了它们，再次启动项目时会出现 "Loading PostCSS "postcss-pxtorem" plugin failed: Cannot find module 'postcss-pxtorem'" 的错误信息。

这是因为在你的项目中仍然存在配置文件或依赖项引用了 `postcss-pxtorem` 插件，但是你已经将该插件从项目中删除了。

你需要做以下两件事情来解决这个问题：

1. 在你的项目中搜索 `postcss-pxtorem`，找到并删除所有使用该插件的配置文件或依赖项。例如，在 webpack 配置文件中删除 `postcss-pxtorem` 插件的配置。

2. 在项目根目录下执行以下命令，清除缓存并重新安装依赖：

npm cache clean --force
rm -rf node_modules
npm install

这样就可以解决这个问题了。

postcss-pxtorem和postcss-px2rem 区别

postcss-pxtorem 和 postcss-px2rem 都是 PostCSS 插件，用于将 CSS 中的像素单位转换为 rem 单位，以实现响应式布局和移动端适配。

区别如下：

1. 转换单位计算方式不同：postcss-pxtorem 是将像素值转换为 rem 值，转换后的值保留小数点后 5 位；postcss-px2rem 是将像素值转换为 rem 值，并且直接舍去小数点，转换后的值为整数。

2. 配置方式不同：两者的配置方式不一样，postcss-pxtorem 的配置项是一个对象，而 postcss-px2rem 的配置项是一个函数。

3. 相应需求不同：postcss-pxtorem 更适合移动端适配，而 postcss-px2rem 更适合响应式布局。因为移动端设计时一般会使用 1px 线条等细节设计，这时候用 postcss-pxtorem 转换后可以保留细节，而使用 postcss-px2rem 时 1px 线条和其他像素单位不一致时会出现问题。

总之，二者各有特点，开发者在使用时应根据自己的需求选择合适的插件。