postcss-px-to-viewport配置时postcss.atRule is not a constructor 报错，使用patch-package解决

最新推荐文章于 2025-04-21 17:38:17 发布
原创 最新推荐文章于 2025-04-21 17:38:17 发布 · 1.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#postcss #npm

本文介绍了如何在Node.js项目中修复postcss-px-to-viewport的问题，包括修改AtRule，使用patch-package处理包更新后的冲突，以及在package.json中配置postinstall脚本和重启项目的步骤。
部署运行你感兴趣的模型镜像

1. 找到node_modules/postcss-px-to-viewport/index.js

将atRule修改为AtRule

2. 安装patch-package

npm install patch-package-D

3.在package.json的scripts中增加如下内容

"postinstall": "patch-package",

4.运行指令

npx patch-package postcss-px-to-viewport

如下

5.重新install数据

pnpm install 或 npm install

6.重启项目即可

 

您可能感兴趣的与本文相关的镜像

Llama Factory

Llama Factory

模型微调
LLama-Factory

LLaMA Factory 是一个简单易用且高效的大型语言模型（Large Language Model）训练与微调平台。通过 LLaMA Factory，可以在无需编写任何代码的前提下，在本地完成上百种预训练模型的微调

马娟
关注
前端适配方案之 flexible.js 到 postcss-px-to-viewport-8-plugin插件演进
前端开发-前端技术分享
06-19 696
针对响应式布局开发中遇到的单位转换问题，从amfe-flexible到viewport方案的迁移方法。重点讲解了postcss-px-to-viewport-8-plugin插件的使用与配置，解决postcss版本升级导致的问题。文章提供了完整的vite+react项目配置示例，包括postcss.config.js的设置要点和实际代码应用，并强调viewportWidth需与设计稿宽度保持一致。最后给出了详细的CSS样式代码，展示如何实现基于viewport单位的响应式布局。
关于postcss-px-to-viewport的使用经验
An_cf的博客
12-31 6698
最近在工作项目使用中新接触到postcss-px-to-viewport，在使用上遇到一个坑，也有段时间没更新啦，记录分享一下~希望对你有所帮助！ 直接上重点，节省在网站苦苦寻找有效答案的你 >>> 我所遇到的坑： 由于项目需要，需要适配不同分辨率的终端设备，比如我接到的项目需求是1920*1080以及1200*1920；如果使用过postcss-px-to-viewport的话，我们知道适配一种尺寸在配置时设置viewportWidth就可以，那如果适配两种呢？ 一开始我想到的是
记录遇到过的npm包的问题即可以使用patch-package解决问题的一些场景
qq_37057426的博客
02-27 2038
patch-package确实给我们带来了极大的便利，因为平时使用的npm包也都是程序员们写的，总会有这个那个问题，或者没有达到预期效果，需要改源码的场景，以上就是我遇到过的需要patch-package解决的问题，当然还有很多其他的场景也可以用的到，比如antd的组件maxLength属性限制不符合预期问题，该问题已在后续版本修复了，这里就不具体展开了。
postcss-viewports
05-02
PostCSS视口 这样一来，您就可以轻松地在CSS中添加data- [viewport]属性，从而更轻松地通过HTML控制不同视口的样式。 它将使用@viewport规则之前或包装的所有属性，并为这些属性添加data- [viewport]属性。 使用PostCSS视口 设置 var options = { viewports : { 'lap' : '800px' , 'palm' : '400px' } } ; postcss ( [ require ( 'postcss-viewports' ) ( options ) ] ) 选项： viewports ，您的视口名称和最大宽度的列表。 用法 body { font-size : 14 px ; } /* Just apply to next property *
postcss-nest-atrules:PostCSS插件可将atrules嵌套在其规则中（反扭曲）
05-15
PostCSS Nest Atrules 插件可将atrules嵌套在其规则内（反扭曲）。 我制作此插件的主要原因是，它可以轻松地将CSS转换为CSS-in-JS。 . root { color : red; } @media screen and ( min-width : 5 em ) { . root { color : green; } } . root { color : red; @media screen and ( min-width : 5 em ) { color : green; } } 用法 postcss ( [ require ( 'postcss-nest-atrules' ) ] ) 有关您的环境的示例，请参见文档。
postcss-px-to-viewport配置横屏参数landscape: true报错postcss.atRule is not a constructor
阑珊伊人
04-17 5299
首先postcss-px-to-viewport是一款很优秀的插件，他能将px转换成视口单位vw，而vw本质上还是一种百分比单位。所以项目中常使用此插件来解决适配问题 前几天，由于项目中有横屏适配的需求，经过查阅插件api后，发现landscape这个参数就是用来处理横屏适配问题的。但是当我配置上后，项目开始启动报错。 报错截图如下： 报出了这个问题： postcss.atRule is not a constructor 后面是试图在网上找找有没有相关的解决方案，可惜并没有找到。 也尝试过换插件版本，
配置postcss-px-to-viewport报错[plugin:vite:css] Failed to load PostCss config module is not defined in
weixin_44295184的博客
12-14 2586
配置postcss-px-to-viewport报错[plugin:vite:css] Failed to load PostCss config module is not defined in
postcss-px-to-viewport易错点
qq_51145046的博客
04-13 306
postcss安装，postcss-px-to-viewport易错点
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 插件的使用：postcss-px-to-viewport、postcss-pxtorem
最新发布
江湖行骗老中医
04-21 1317
这个插件主要用于响应式设计，使网页在不同设备和屏幕尺寸上具有更好的适应性。是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为视口单位（安装好插件后，需要在 PostCSS 配置文件（例如。然后，在你的 PostCSS 配置文件（通常是。
使用postcss-px-to-viewport-8-plugin将页面转响应式
qq_45279180的博客
03-29 1855
可以看到exclude的配置如上所示，但是并没有include的配置，难不成这个配置不在index.js吗，但是没有找到，这里先暂且按下不表，先检查一下include的正则匹配有没有问题，打印上面的file以及正则匹配结果，发现无法匹配。OK打包完成，检查一下css，发现和上面一样，单位是转换了，但是是全局的，include并没有生效，事已至此没办法了，只能看看源码调试一下了。然后我看了下，发现是postcss8换写法了，得升级，于是我检查了一下next自带的postcss版本，发现是。
解决安装postcss-px-to-viewport配置postcss.config.js时报错triggerUncaughtException(err, true /* fromPromise */
gfujhfd的博客
01-03 2375
将 postcss.config.js 文件重命名为 postcss.config.cjs。这样做可以将其视为 CommonJS 脚本而不是 ES 模块。原因：使用了 ES Module 的语法，但是 PostCSS 的配置文件中使用了 CommonJS 的模块语法，导致了模块定义的问题。修改你的 postcss.config.js 文件，确保其导出一个对象作为模块的默认导出，而不是使用 module.exports。
安装postcss-px-to-viewport 配置postcss.config.js 报错Error: true is not a PostCSS plugin
tangdou369098655的博客
04-22 6379
因项目需要，用户突然要坚持小屏幕也要观看大屏代码，临时解决方案是加了一个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没有解决问
记录第一次使用postcss-px-to-viewport配置postcss.config.js出现报错
HHHHH2187的博客
03-08 840
这里我先说一下 我这里使用步骤第一步下载postcss-px-to-viewport第二步骤新建一个文件 postcss.config.js，进行简单配置第三步骤,配置完后重启运行 pnpm dev ,就会出现以下报错我发现冲重试几次 或者重新下载也会报错。
postcss-px-to-viewport配置landscape: true后运行报错处理
wulijuan888666的博客
04-21 887
需要在package.json 配置"postcss":"7.0.32", 注意版本 重新cnpm i "devDependencies": { "postcss":"7.0.32", "postcss-px-to-viewport": "^1.1.1" }, "resolutions":{ "postcss": "7.0.32" },
【亲测免费】 postcss-px-to-viewport 常见问题解决方案
gitblog_09235的博客
09-13 1415
postcss-px-to-viewport 常见问题解决方案 项目基础介绍 postcss-px-to-viewport 是一个用于 PostCSS 的插件，主要功能是将 CSS 中的像素单位（px）转换为视口单位（vw, vh, vmin, vmax）。这个插件非常适合用于创建在不同屏幕尺寸下具有良好响应性的界面。项目的主要编程语言是 JavaScript。 新手使用注意事项及解决方案 1. ...
postcss-px-to-viewport 从入坑到放弃 （nuxt3搭建响应式官网解决方案 ）
Vinca@的博客
05-07 9567
什么是 postcss-px-to-viewport将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。为什么使用 postcss-px-to-viewport在pc端盛行的时代 ，如果你不想去适配更多的pc端，可以采用它。由于nuxt3本身已带postcss，所以无需额外安装。
【vue3常见报错7】Uncaught TypeError - xxx is not a constructor
朱远辉的博客
05-19 3903
【vue3常见报错7】Uncaught TypeError - xxx is not a constructor
6.4 xxx is not a constructor，npx命令，webpack严格遵循导入导出，★★webpack学习小记，source-map无追踪
qq_40196738的博客
06-06 5553
1、在尝试es5的require方式导入模块，发现打包时出现,Vue is not a constructor 在比对大佬的代码后，发现不同就是大佬使用的是es6的import引入Vue而我是require， 故尝试安装babel最新插件让webpack支持es6语法。 安装三大核心插件 "@babel/core": "^7.4.5", "babel-loader": "^8.0....
postcss-px-to-viewport this.getOptions is not a function
03-20
### 关于 `this.getOptions is not a function` 错误的原因分析 该错误通常发生在插件内部调用了不存在的方法或者方法名被更改的情况下。对于 `postcss-px-to-viewport` 插件而言，此问题可能源于以下几个方面： 1. **PostCSS 版本不兼容** 如果使用的 PostCSS 版本较低，则可能导致某些 API 方法不可用或已被废弃。例如，在较新的 PostCSS 版本中，`getOptions` 已经不再是一个独立的函数[^1]。 2. **插件版本冲突** 当前项目的依赖树可能存在多个不同版本的 PostCSS 或者其他相关插件（如 autoprefixer），这可能会导致加载时出现问题并引发此类错误[^2]。 3. **配置文件格式错误** 如果 `postcss.config.js` 的定义方式不符合当前环境的要求，也可能触发类似的运行时异常。例如，如果使用的是 ES Module 导出语法而未正确设置 Babel 转译器支持，则会遇到解析失败的情况[^4]。 #### 解决方案 以下是几种可行的办法来修复上述提到的问题： ##### 方法一：更新至最新稳定版 确保所有涉及的相关包都处于最新的状态可以帮助消除潜在的功能缺失风险。 ```bash npm install postcss-px-to-viewport@latest --save-dev npm install postcss@latest --save-dev ``` ##### 方法二：调整配置文件结构 按照官方文档推荐的方式重新编写 `postcss.config.js` 文件内容如下所示： ```javascript export default { plugins: [ require('postcss-px-to-viewport')({ viewportWidth: 375, viewportHeight: 667, unitPrecision: 5, viewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false }) ] }; ``` 注意这里采用了现代 JavaScript 的模块化标准来进行资源引入操作。 ##### 方法三：应用补丁工具修补源码缺陷 当发现特定场景下的 bug 来自第三方库本身而非个人实现失误时，可以考虑利用像 patch-package 这样的工具快速打上临时性的修正措施直到原作者发布正式更正为止。具体步骤参见参考资料中的描述[^3]。 --- ### 总结 通过以上三种途径之一应该能够有效缓解乃至彻底根治关于 `this.getOptions is not a function` 的困扰现象。不过需要注意每次执行升级动作之前最好先备份好现有工程以防万一造成不必要的麻烦。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值