vue中安装postcss-pxtorem插件后运行项目报错PostCSS plugin postcss-pxtorem requires PostCSS 8.

最新推荐文章于 2024-04-16 10:26:17 发布
最新推荐文章于 2024-04-16 10:26:17 发布
阅读量484 收藏
点赞数
分类专栏： Bug搜集 vue 文章标签： postcss vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48010432/article/details/122553890
版权

 

解决方法：

安装低版本的postcss-pxtorem

yarn add postcss-pxtorem@5.1.1 或者
npm  i postcss-pxtorem@5.1.1

Hello^_^Monkey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目配置 postcss-pxtorem 报出警告问题
m0_52757756的博客
08-22 246
今天安装postcss-pxtorem 准备将 px 单位转换为rem单位 安装完插件后并创建文件夹postcss.config.js 配置文件为如下 重新编译运行 报下面错误 报错让我把browserslist 放在 package.json文件里面 或者.browserslistrc文件里面 注意文件前面有点 我重新创建了一个.browserslistrc文件 并配置如下 "browserslist": [ "> 1%", "last...
Vue中rem与postcss-pxtorem的应用详解
10-15
主要介绍了Vue中rem与postcss-pxtorem的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
qq920822321的博客
12-21 489
降低postcss-pxtorem@5.1.1 npm i postcss-pxtorem@5.1.1
vue 使用postcss-pxtorem pc端或移动端自适应适配
最新发布
liuhao66_的博客
04-16 721
到现在就可以啦. 补充:如果想使用px作为单位,可以将px写为Px。
vue3适配postcss-pxtorem报错
qq_39037897的博客
06-21 887
vue3适配postcss-pxtorem报错
解决vue安装postcss-pxtorem运行后报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
qq_43364129的博客
03-25 4140
相信最近使用postcss-pxtorem + amfe-flexible移动端适配的同学会发现，安装完postcss-pxtorem并配置好vue.config.js后，会报错Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.，明明是按以往配置，怎么突然出错了… 实际上postcss-pxtorem已经步入6.0版本。 需要依赖于postcss8.0实现（具体项还没研究清楚~~TAT） 那么解决办法也很简单，查看package.json里po
vue运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
gxdzi的博客
01-05 1363
postcss-pxtorem使用方法：https://www.cnblogs.com/liangziaha/p/13636936.html 这里报错 postcss-pxtorem 需要 8. 我以为要使用postcss-pxtorem 8.以上的版本就去看了一下postcss-pxtorem版本最高才6.0 这里降低 postcss-pxtorem@5.1.1 npm i postcss-pxtorem@5.1.1 再次运行npm start 就可以了 ...
vue3.0中使用postcss-pxtorem的具体方法
10-15
在Vue 3.0框架中，使用`postcss-pxtorem`是一个有效的方法，可以帮助开发者将CSS中的像素单位（px）转换为相对单位（rem），从而实现响应式布局，特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件，它的...
关于vue利用postcss-pxtorem进行移动端适配的问题
01-19
1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-...
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
postcss-pxtorem 报错PostCSS plugin postcss-pxtorem requires PostCSS 8.
qq_46113598的博客
07-08 447
postcss-pxtorem 报错PostCSS plugin postcss-pxtorem requires PostCSS 8.
vue移动端适配（postcss-pxtorem和amfe-flexible）
qq_41656414的博客
06-10 2722
一、移动端适配（postcss-pxtorem和amfe-flexible） 在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配) 实现思路：①通过postcss-pxtorem实现将px转成rem，②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件，我们就可以实用设计稿的px来进行开发了。 1.安装postcss-pxtorem和amfe-flexible Npm install postcss-pxtorem --sa
解决vue中安装postcss-pxtorem插件，报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
k912120的博客
03-11 2万+
过程：创建vue新项目，安装Vant组件库后，需要使用rem单位，所以接着安装postcss-pxtorem 插件，但是项目运行就报错“Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”了， 找了多种解决方案未起效，最终通过这位大佬的方法，成功解决，该大佬的文章地址https://www.cnblogs.com/liangziaha/p/14492288.html 运行后的测试页面如下： ...
Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 启动项目时候报错
weixin_56654424的博客
04-25 2302
Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 启动项目时候报错
postcss-pxtorem
weixin_51629637的博客
05-09 1万+
vant配置：postcss-pxtorem以及解决 “Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”问题 1.npm安装 npm install postcss-pxtorem --save 2.utils文件夹下（没有就新建一个）,新建一个rem.js copy以下代码： const baseSize = 37.5 //跟postcss.config.js中rootValue的值是一致的 // 设置 rem 函数 function
【vue框架】 vue-cli从0开始搭建移动端vue项目框架（vscode版本）
我有满天星辰的博客
04-13 6807
github因为 rem 这个单位是要根据 html 的字号的变化而变化，那么html字号要如何才能变换呢？要么我们自己写媒体查询，根据不同的屏幕宽度给html设置不同的字号，但是这样就比较麻烦，因为移动端的屏幕特别多，要自己写媒体查询，就累到吐血，所以可以用别人写好的插件，自动根据屏幕大小来设置html的字号flexible 就是一种能根据屏幕自动设置html字号的插件。
vue-自适应布局-postcss-pxtorem
m0_65039133的博客
05-20 4447
它的适配原理是将CSS中的像素值除以一个基准值，通常是设计稿的宽度，然后将结果转换为rem单位。这样，不同屏幕尺寸下，rem单位的大小是相同的，从而实现了响应式布局和适配的效果。例如，如果设计稿的宽度为750px，那么在CSS中设置一个元素的宽度为150px，postcss-pxtorem会将其转换为2rem（150/750=.2，.2*10=2）。postcss-pxtorem是一个PostCSS插件，用于将CSS中的像素值转换为rem单位，以实现响应式布局和适配不同屏幕尺寸的需求。
通过插件postcss-pxtorem轻松实现px到rem转换，完成移动端适配
热门推荐
llq886的博客
04-24 3万+
移动端适配: 为什么要适配呢？使用px单位设置页面的大小时，不进行适配处理，在不同的设备中显示结果是这样的，分辨率越大，显示的元素越小。 如下图1所示，使用的是px单位，未进行适配：iPhone5、iPhone6及iPhone6 Plus的显示效果： 控制台看到的css单位为px: 适配的方法有很多种，本节介绍之前开发项目使用的适配方法：使用post-loader 加 postcss-pxto...
postcss-pxtorem配置vue2
07-28
在Vue2中配置postcss-pxtorem，你可以按照以下方式进行配置： 方式一： 在vue.config.js中添加以下代码： ```javascript const px2rem = require('postcss-px2rem') const postcss = px2rem({ remUnit: 75 // 基准大小 baseSize，需要和rem.js中相同 }) module.exports = { /* 注意sass，scss，less的配置 */ productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 css: { loaderOptions: { postcss: { plugins: \[ postcss \] } } } } ``` 方式二： 在vue.config.js中添加以下代码： ```javascript module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: \[ require('postcss-px2rem')({ remUnit: 30 // 配置项，详见官方文档 }), // 其他插件 \] } } } } ``` 方式三： 在vue.config.js中添加以下代码： ```javascript var px2rem = require('postcss-px2rem'); module.exports = { module: { loaders: \[ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } \] }, postcss: function() { return \[px2rem({remUnit: 75})\]; } } ``` 请注意，如果你遇到了"Error: PostCSS plugin postcss-pxtorem requires PostCSS 8"的错误，这可能是因为缺少相应的插件。你需要安装postcss和postcss-loader这两个插件来解决这个问题。 #### 引用[.reference_title] - *1* *2* [使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0](https://blog.csdn.net/JackieDYH/article/details/115463646)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue2移动端适配插件‘postcss-pxtorem](https://blog.csdn.net/weixin_61211370/article/details/129299542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值