安装postcss-px-to-viewport 配置postcss.config.js 报错Error: true is not a PostCSS plugin

已于 2023-03-10 00:30:09 修改
阅读量6k 收藏 1
点赞数
文章标签： postcss css vue
于 2021-04-22 22:28:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangdou369098655/article/details/116034324
版权

因项目需要，用户突然要坚持小屏幕也要观看大屏代码，临时解决方案是加了一个postcss-px-to-viewport ，安装过程中报错Error: true is not a PostCSS plugin

首先声明我的vue-cli中package-lock.json写的webpack版本是4.28.4

解决办法

方案1.其下面代码添加到package.json里即可

 "peerDependencies": {
        "postcss": "^8.0.0"
    },

如果方案1没有解决问题，可以尝试回滚autoprefixer@9.8.6

tangdou369098655
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
postcss-px2viewport:PostCSS的插件，可生成rem版本，vm版本以及@ 1x，@ 2x和@ 3x样式表
05-01
postcss-px2viewport 一个postcss插件，结合viewport.js使用 默认使用vw作为布局单位，对于不支持vw单位的，则使用rem进行布局 对于标记了/*px*/的，则转换为[data-dpr="1"]、[data-dpr="2"]、[data-dpr="3"]三种不同的字体 对于标记了/*no*/的，则不做处理，依然使用px进行布局 how to use webpack please run npm install postcss-loader --save-dev, and add the code var px2viewport = require('postcss-px2viewport'); module.exports = { module: { loaders: [ { test: /\.css$/,
vue 启动失败 Module build failed true is not a PostCSS plugin
Python-PTA操作
11-03 1717
vue启动失败 报错 Module build failed: Error: true is not a PostCSS plugin
postcss-px-to-viewport配置include不生效，使用多个设计稿
最新发布
weixin_60924822的博客
08-06 328
若是想使用多个设计稿宽度,在postcss.config.js中使用。下载的资源版本问题，正确的资源。
Taro入坑记
qq_33715850的博客
08-22 911
Taro入坑记
报错：taro react error: true is not a postcss plugin
guolinlin_0630的博客
11-17 319
2.project.config.json文件修改。
PostCSS a not plugin 打包is jenkins打包发布问题跟踪 Error: [object Object] is not a PostCSS plugin
bydfguifd的博客
07-13 2855
之前在develop平台上 一个前台项目全自动构建都正常，昨天构建失败了
vue 安装postcss-pxtorem插件报错：[object Object] is not a PostCSS plugin。
weixin_36724538的博客
06-02 1万+
.postcssrc.js文件配置 module.exports = { “plugins”: { “postcss-import”: {}, “postcss-url”: {}, “autoprefixer”: { browsers: [‘Android >= 4.0’, ‘iOS >= 7’] }, ‘postcss-pxtorem’: { rootValue: 37.5,　　//结果为：设计稿元素尺寸/37.5，比如元素宽375px,最终页面会换算成 10rem propList: [’*
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
安装：`npm i postcss-plugin-px2rem -D`，然后在`vue.config.js`中配置`loaderOptions`，引入`postcss-plugin-px2rem`，同样设置`rootValue`为75。 ```javascript module.exports = { css: { loaderOptions: { ...
前端开源库-postcss-px-to-viewport.zip
10-05
2. 配置：在项目中创建一个PostCSS配置文件（如postcss.config.js），并设置postcss-px-to-viewport的选项，如转换的最小和最大视口宽度、单位转换的精度等。 3. 引入：在你的CSS文件中，你可以继续使用px单位，插件...
postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择
05-02
postcss px到视口 English | 的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。 演示版 如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; ...
postcss-plugin-pxtoviewport
05-13
postcss-plugin-pxtoviewport用法配合postcss可以使px转为vw和rem输入/输出可以通过配置参数，实现px同时转为vw和rem// 输入h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px;}// ...
[object Object] is not a PostCSS plugin
车联网开发的博客
11-09 4792
最近在做移动端的项目时，想让px自动转换为rem布局，做到屏幕自适应。在安装postcss-pxtorem时 npm install postcss-pxtorem -S 然后运行npm run dev 就会报错 [object Object] is not a PostCSS plugin 查询资料说安装的postcss-pxtorem 版本太高目前是6.xx版本 然后 npm install postcss-pxtorem @5.1.1 -S 再次运行 npm run dev 后，完美
基于vue cli5使用vant 组件，postcss-px-to-viewport 无法解析vant内部样式问题
qq_39831708的博客
06-26 3056
参照以上vant官网提供的方式，发现只能编译项目内部开发的页面，根本无法将vant样式px编译为vw单位，以下是使用官方例子后编译后的样式单位 项目基于vue-cli5搭建的，后续解决方式采用webpack中postcss-loader参数postcssOptions解决。具体无法解析的原因不详，估计与vue-cli配置有关。以下是解决后的样式单位 附上解决方案,首先安装postcss-px-to-viewport 以下是vue.config.js的代码,并且支持了项目ui设计稿为750px标准情况..
配置postcss-px-to-viewport报错[plugin:vite:css] Failed to load PostCss config module is not defined in
weixin_44295184的博客
12-14 1157
配置postcss-px-to-viewport报错[plugin:vite:css] Failed to load PostCss config module is not defined in
Error: [object Object] is not a PostCSS plugin解决方案
liyananweb的博客
03-08 2225
Error: [object Object] is not a PostCSS plugin解决方案
关于vite5中postcss-px-to-viewport插件问题和require问题
weixin_42348009的博客
12-25 954
解决方法是 nvm ls查看版本 再nvm use 版本号。
Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-import‘
热门推荐
qq_41735632的博客
03-01 2万+
Vue cli-3 使用css转换postcss插件报错 Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-import’ 寻找错误解决问题 1.安装npm install postcss-px-to-viewport --save-dev 2.添加配置文件postcss-config.js 运行报错 报错提示：没有找到 postcss-import模块 猜想：①使用postcss插件需要额外npm install pos
前端页面适配之postcss-px-to-viewport
不想学习的打工人的博客
03-24 1万+
postcss-px-to-viewport是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局，以提高页面的响应性和可用性。
Error: PostCSS plugin postcss-pxtorem requires PostCSS 8 问题解决办法
m0_47408435的博客
03-20 5202
报错原因： postcss-pxtorem版本过高 解决方案： 降低postcss-pxtorem版本 执行: npm uninstall postcss-pxtorem 在项目的package.json的devDependencies下添加"postcss-pxtorem": “^5.1.1”, 再执行：npm i 再进行打包运行即可 ...
postcss-px-to-viewport 在vue.config.js中怎么配置
07-14
你可以在vue.config.js文件中配置postcss-px-to-viewport插件来将px单位转换为vw或者vh单位。首先，确保你已经安装了postcss-px-to-viewport插件。 然后，在vue.config.js文件中添加以下代码： ```javascript module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-px-to-viewport')({ viewportWidth: 750, // 视窗的宽度，对应设计稿宽度 viewportHeight: 1334, // 视窗的高度，对应设计稿高度 unitPrecision: 3, // 指定px转换为视窗单位值的小数位数 viewportUnit: 'vw', // 指定需要转换成的视窗单位，vw或者vh selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类 minPixelValue: 1, // 小于或等于1px不转换为视窗单位 mediaQuery: false // 允许在媒体查询中转换px }) ] } } } }; ``` 在以上代码中，你可以根据你的设计稿的宽度和高度来设置`viewportWidth`和`viewportHeight`的值。你还可以根据需要调整其他配置项，如`unitPrecision`、`viewportUnit`等。 配置完成后，重新运行你的Vue项目，postcss-px-to-viewport插件会自动将样式文件中的px单位转换为vw或者vh单位。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值