Cannot find module 'postcss-pxtorem'

在使用 `postcss-pxtorem` 模块时，如果遇到错误提示 **"Cannot find module 'postcss-pxtoret'"**，通常表示模块未正确安装或配置路径存在问题。以下是可能的解决方案： ### 1. 确保模块已正确安装 首先检查是否已经通过 npm 或 yarn 安装了 `postcss-pxtorem` 模块。可以在项目目录下运行以下命令进行安装： ```bash npm install postcss-pxtorem --save-dev ``` 或者使用 yarn： ```bash yarn add postcss-pxtorem --dev ``` 安装完成后，确认 `node_modules` 目录中是否存在 `postcss-pxtorem` 文件夹，并且 `package.json` 中的 `devDependencies` 包含该模块。 ### 2. 配置 PostCSS 配置文件 确保项目根目录中存在 `postcss.config.js` 文件，并在其中正确引入和配置 `postcss-pxtorem` 插件。示例配置如下： ```javascript module.exports = { plugins: { autoprefixer: {}, 'postcss-pxtorem': { rootValue: 37.5, // 设计稿宽度 / 10，如以 375 为基准则为 37.5 propList: ['*'], // 需要转换的属性，'*' 表示所有属性 exclude: /node_modules/i, // 排除 node_modules 中的文件 }, }, }; ``` 此配置将自动将项目中的 px 单位转换为 rem 单位，适用于移动端适配场景[^1]。 ### 3. 清理缓存并重新安装依赖 有时由于缓存问题，即使安装成功也可能无法识别模块。可以尝试清除 npm 缓存并重新安装依赖： ```bash npm cache clean --force rm -rf node_modules package-lock.json npm install ``` 如果是使用 yarn，则可以运行： ```bash yarn cache clean rm -rf node_modules yarn.lock yarn install ``` ### 4. 检查构建工具配置 如果你使用的是 Vue CLI、Create React App 或其他基于 Webpack 的构建工具，请确保它们支持 PostCSS 配置，并且没有对 `postcss.config.js` 进行覆盖或忽略处理。某些脚手架工具需要额外安装 `postcss-loader` 和 `postcss`： ```bash npm install postcss postcss-loader --save-dev ``` 并在 Webpack 配置中添加相应的 loader 规则： ```javascript { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: { autoprefixer: {}, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], }, }, }, }, }, ], } ``` ### 5. 检查 Node.js 和 NPM 版本 确保使用的 Node.js 和 NPM 版本与项目兼容。建议使用 LTS（长期支持）版本的 Node.js，例如 v16.x 或 v18.x，并更新到最新稳定版的 npm。 ---