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

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

相关问题

vue安装postcss-pxtorem后，f12控制台看到px没有被转成rem

在Vue项目中安装了postcss-pxtorem插件后，如果在浏览器的控制台中看到px没有被转换成rem，可能是由于以下几个原因：

1. 检查postcss.config.js文件是否正确配置了postcss-pxtorem插件。确保rootValue的值设置为16，这是将设计稿元素尺寸转换为rem的基准值。同时，propList设置为['*']可以将所有的属性值都转换为rem。

2. 检查是否正确安装了postcss-pxtorem插件。可以通过运行命令`yarn add postcss-pxtorem`来安装插件。然后在package.json文件中查看是否成功添加了"postcss-pxtorem"依赖。

3. 确保在Vue项目中正确配置了postcss-loader。在webpack配置文件中，需要将postcss-loader添加到对应的loader中，并在postcss-loader的options中添加对postcss-pxtorem插件的配置。

如果以上步骤都正确配置，但仍然无法在控制台中看到px被转换成rem，可能是由于其他原因导致的问题。可以尝试重新安装插件或查看相关文档和社区讨论来解决该问题。

vue使用postcss-pxtorem

在Vue项目中使用postcss-pxtorem插件可以将px单位转换为rem单位。以下是使用步骤：

1. 首先，确保你已经安装了postcss和postcss-pxtorem插件。可以通过以下命令进行安装：

npm install postcss postcss-pxtorem --save-dev

2. 在项目根目录下创建一个postcss.config.js文件，并在该文件中配置postcss-pxtorem插件。示例配置如下：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // rem基准值，通常为设计稿宽度的1/10或1/16
      propList: ['*'], // 需要转换的属性，*表示所有属性
      selectorBlackList: [] // 需要忽略的选择器，比如引入第三方UI库时需要排除
    }
  }
}

3. 在项目的build/webpack.base.conf.js文件中的postcss-loader配置中添加postcss-pxtorem插件。示例配置如下：

const px2remConfig = {
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    config: {
      path: 'postcss.config.js' // 指定postcss配置文件路径
    }
  }
}

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          px2remConfig // 添加postcss-pxtorem插件
        ]
      },
      // ...
    ]
  },
  // ...
}

4. 配置完成后，重新启动项目，此时px单位会自动转换为rem单位。

需要注意的是，postcss-pxtorem插件会将所有px单位转换为rem单位，如果你希望某些特定的属性不进行转换，可以在配置文件中的propList选项中添加对应的属性名。另外，如果你使用了第三方UI库，可能需要在配置文件的selectorBlackList选项中添加相应的选择器来排除转换。