create-react-app 创建 react18 项目使用 postcss-px-to-viewport 将 px 转换为 vw 失效

最新推荐文章于 2024-03-31 09:38:34 发布
最新推荐文章于 2024-03-31 09:38:34 发布
阅读量1.4k 收藏
点赞数 2
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51634332/article/details/127150609
版权

create-react-app 创建 react18 项目使用 postcss-px-to-viewport 将 px 转换为 vw 失效

配置方式网上有很多，我在之前的 react17 项目上没有出现这个问题，react18 莫名其妙出现了，最后发现是 react-scripts 版本问题，最新的 5.x 版本导致无法转换，最后还是重新安装了 react-scripts 4.x 版本，问题得以解决。

npm i react-scripts@4
imtanqin
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react脚手架引入配置postcss-px-to-viewport或postcss-px2rem失效的问题
Irisping的博客
05-17 1073
react18脚手架vw和rem配置失效相关问题
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。 目录 已添加到应用程序的依赖项 还原 react-redux Redux-Saga 一成不变的 React路由器域 react-router-redux devDependencies： 随行（根据Airbnb规则） 预先提交 快速开始 1.克隆项目 # with SSH git clone [email protected]:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
craco配置postcss8下的postcss-px-to-viewport插件
qq_43616690的博客
07-13 4247
craco配置postcss中的postcss-px-to-viewport插件
推荐项目：PostCSS PX to Viewport 8 Plugin
最新发布
gitblog_00015的博客
03-31 1094
推荐项目：PostCSS PX to Viewport 8 Plugin 项目地址:https://gitcode.com/lkxian888/postcss-px-to-viewport-8-plugin 在前端开发中，适配各种屏幕尺寸已经成为一个不可或缺的需求。PostCSS PX to Viewport 8 Plugin 是一款高效、易用的PostCSS插件，用于自动将CSS中的像素单位（...
cra: addlessloader 配置报错解决方案(create-react-app)
mollerlala的博客
05-25 1772
报错1：Less Loader Less Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'localIdentName'. These properties are valid: object { lessOptions?, additionalData?, sourceMap?, webpackImporte
npm create-react-app出错的解决方法
gd0568的专栏
08-26 1万+
Microsoft Windows [版本 10.0.17763.652] (c) 2018 Microsoft Corporation。保留所有权利。 C:\Users\sam>npm install -g react + react@16.9.0 added 5 packages and updated 1 package in 46.018s C:\Users\sam>npm...
react 18 配置 postcss-px-to-viewport
huangxiaolongren的博客
04-21 694
解决方法：安装适配8的版本。
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; } // 输出 h1 { margin: 0 0 20px; margin: 0 0 1.25rem; margin: 0 0 5.33333vw; font-size: 32px; font-size: 2rem; font-size: 8.53333vw; line-height: 1.2; letter-spacing: 1px; } 参数 Type: Ob
【vue】使用postcss-px-to-viewport和style-vw-loader进行pc端和移动端适配，解决行内样式不能转换为vw的问题
qq_43691733的博客
09-15 1732
但是postcss-px-to-viewport做适配，行内样式不能转换为vw，所以使用插件style-vw-loader(github地 https://github.com/hyy1115/style-vw-loader)vue-cli3中我们可以引入postcss-px-to-viewport插件。
前端页面适配之postcss-px-to-viewport
热门推荐
不想学习的打工人的博客
03-24 1万+
postcss-px-to-viewport是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局，以提高页面的响应性和可用性。
postcss-px-to-viewport配置include不生效
Zhou_xiaoqian的博客
01-24 2797
查了很多资料，说是，虽然postcss-px-to-viewport文档上写了这个属性，但是源码没有更新，其实目前是不支持include这个属性的， 大家可以配置exclude属性
npx create-react-app xxx创建项目报错的解决办法
11-21
根据React官方文档（上图）可以发现，此时并不需要安装create-react-app工具，只要你的node >= 8.10 && npm >= 5.6，就可以直接使用npx create-react-app命令来创建项目。 报错 好的:OK_hand:，那就根据上面的来呗，...
create-react-kotlin-app：使用没有构建配置的Kotlin创建React应用
02-03
如果您已经安装了create-react-app或正在使用npx则可以跳过此步骤。 您需要在计算机上使Node> = 6 。 您可以使用在不同项目的Node版本之间轻松切换。 该工具不采用Node后端。 仅创建Create Kot
create-react-app-esbuild:在您的create-react-app中使用esbuild进行更快的编译，开发和测试
05-13
:rocket: create-react-app-esbuild :rocket: 在您的使用可以更快地进行编译，开发和测试。特征在开发过程中用esbuild替换babel-loader 用esbuild替换babel-loader以加快构建时间用esbuild替换terser，以加快构建...
在create-react-app中使用css modules的示例代码
10-18
主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于创建create-react-app报错
aipincaihy的博客
08-25 113
换成淘宝的镜像源就可以了。
create-react-app 5.0: Invalid Options for PostCSS Loader
m0_49986452的博客
05-06 403
customize-cra version: 1.0.0 create-react-app version: 5.0.0 报错 ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. 解决办法（在addLessLoader之后） adjustStyleLoaders(({ use:
create-react-app my-app --typescript error postcss@8.2.6——解决
xiao廸要飞
02-17 504
执行create-react-app my-app --typescript 报错 => error postcss@8.2.6: The engine “node” is incompatible with this module. Expected version “^10 || ^12 || >=14”. Got “13.14.0” 翻墙查了很多地方并没有明确说明原因，js引擎报错，估计的node 版本不稳定，小迪上官网重新下载了最新的node稳定版。 或者利用nvm install
解决react项目引入antd-mobile导致postcss配置px转rem失效问题
m0_46733951的博客
04-30 2123
今天使用了一下antd-mobile发现我之前配置的postcss失效了，防止下次踩坑记录一下解决方案 解决方案：在config-overrides.js文件里重写postcss，加入如下代码 const { override, fixBabelImports, addWebpackAlias, addDecoratorsLegacy, } = require("customize-cra"); const path = require("path"); const rewirePostcs
react使用postcss-px-to-viewport
07-29
在React项目中使用postcss-px-to-viewport，首先需要在项目中安装postcss和postcss-px-to-viewport插件。可以使用npm进行安装： ``` npm install postcss postcss-px-to-viewport --save-dev ``` 安装完毕后，在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值