postcss-pxtorem 插件没有让 node_modules 里面的 px 转换成 rem
时间: 2024-06-13 18:01:29 浏览: 289
postcss-pxtorem 是一个 PostCSS 插件,用于将 CSS 中的像素单位 px 转换为 rem 单位。它的使用非常简单,只需要在项目中安装该插件并在 postcss.config.js 中进行配置即可。
如果你已经按照正确的方式安装和配置了 postcss-pxtorem 插件,但是却没有发现 node_modules 里面的 px 被转换成了 rem,可能有以下几个原因:
1. 你没有正确引入该插件,可以检查一下是否在 postcss.config.js 中正确配置了该插件。
2. 你没有在 CSS 文件中使用 px 单位,可以检查一下你的 CSS 文件中是否存在 px 单位。
3. 你没有设置正确的转换参数,可以检查一下你在配置文件中设置的参数是否正确。例如,你可能需要设置 rootValue 参数以指定基准值。
如果以上原因都不是问题所在,你可以尝试在项目中创建一个简单的 demo 来测试该插件是否工作正常,以便更好地排查问题。
相关问题
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
```
这样就可以解决这个问题了。
ERROR in ./src/views/version.vue?vue&type=style&index=0&id=53a89fae&lang=less&scoped=true (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/version.vue?vue&type=style&index=0&id=53a89fae&lang=less&scoped=true) Module Error (from ./node_modules/postcss-loader/dist/cjs.js): Loading PostCSS "postcss-pxtorem" plugin failed: Cannot find module 'postcss-pxtorem'
这是一个关于 Webpack 和 PostCSS 加载器的错误,可能是缺少 postcss-pxtorem 插件导致的。你可以尝试以下步骤来解决这个问题:
1. 确认你已经安装了 postcss-pxtorem 插件,如果没有请执行以下命令进行安装:
```
npm install postcss-pxtorem --save-dev
```
2. 确认你的 webpack 配置文件中已经添加了 postcss-loader,并且在 postcss-loader 中配置了 postcss-pxtorem 插件。例如:
```
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-pxtorem')({
rootValue: 16,
propList: ['*'],
}),
],
},
},
```
3. 在项目根目录下执行以下命令,清除缓存并重新安装依赖:
```
npm cache clean --force
rm -rf node_modules
npm install
```
如果以上步骤仍然无法解决问题,请提供更多详细的错误信息和代码片段以便更好的帮助你解决问题。
阅读全文