利用less函数轻松解决WebStorm格式化rpx出错及报错问题

最新推荐文章于 2024-06-16 20:08:29 发布
最新推荐文章于 2024-06-16 20:08:29 发布
阅读量4k 收藏 2
点赞数 1
分类专栏： 微信小程序前端 微信小程序 文章标签： WebStorm rpx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36456827/article/details/87961238
版权

由于WebStorm默认无法识别rpx，所以格式化时经常会出现以下情况导致样式错误：

 

在网上找了很多解决方法：

有用使用sed对vue文件监听将  “ rpx”替换成“rpx”的

有关闭webstorm css有效性检验的

 

其实这里只要使用less的unit单位转换函数即可完美解决:

 

这样既不会划红线报错，格式化时也不会出现问题

Knight丶
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webstorm 代码格式化后，rpx出现空格问题
Terenceno的博客
09-08 9126
在进行小程序开发时，我们可能不希望使用微信开发平台的代码编辑器，会选择自己常用的编辑器，在更熟练的操作中提高开发效率。 在使用webstorm开发小程序中，当我Ctrl+alt+l进行格式化时，发现样式rpx和数值之前多了一个空格，如下： ...
webstorm和.vue中es6语法报错的解决方法
08-27
ES6 语法报错是 WebStorm 和 Vue 开发中常见的问题，本文将总结 WebStorm 和 Vue 中 ES6 语法报错的解决方法，以便开发者避免采坑。 WebStorm 中 ES6 语法报错的解决方法 在 WebStorm 中，ES6 语法报错可以通过...
webstorm 不识别 rpx 格式化出错
热门推荐
wyk304443164的专栏
09-25 1万+
本文出自： http://blog.csdn.net/wyk304443164 如果你用的是sass那么 http://www.qianduan.org/post-471.html 如果只用了less那么你可以.userinfo-avatar { width: ~"200rpx"; height: ~"200rpx"; border-radius: 50%; }避免编
RPA学习笔记——报错处理——unexpected unindent
最新发布
mpeipeisu的博客
06-16 1052
整个程序中某一行存在缩进错误，会导致从任何一行执行程序都会报错，因此需要逐行排查。你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command +
webstrom uniapp rpx格式化空格 报错飘红 的解决方法
qq_42339350的博客
05-28 4789
网上搜遍了大多就两种 1 sed+解除css报错检测 设置webStrom的filewatdher 实现空格rpx 自动替换，但是我这并没有用处，会一直卡在这里。 2 插件 然而仍然没有作用 解决方法 参考文章 下载 wechat mini program support 插件,设置里面讲小程序支持选为启用。等待一两分钟即可。刚选完时候我的也没反应，但确实过了一会之后就不漂红，格式化没空格了。 效果 格式化之后没空格，css也不飘红了 ...
解决：用 WebStorm 开发小程序，格式化 CSS 时，数值和 rpx 之间被加了空格的 bug
流浪大叔的博客
06-05 6147
解决方法：在 Sass 里定义一个函数，用于返回 rpx。代码：// 定义函数 rpx@function rpx($value) {  @return $value * 1rpx;}// 调用 rpx.selector {  width: rpx(100);}转发自：http://www.qianduan.org/post-471.html...
webstorm 写uniapp时，采用rpx/upx样式失效
bradzhou的博客
03-13 4319
webstorm 写uniapp时，在使用自动对齐之后，采用rpx/upx样式失效 原因：自动对求会对如11rpx这种进行更改，改成11 rpx，多了个空格，样式就失效了，使用sass或者手动去除空格 ...
完美解决webstorm启动索引文件卡死的问题
10-19
下面小编就为大家分享一篇完美解决webstorm启动索引文件卡死的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序中用WebStorm使用LESS
12-12
前提 自己前端不熟悉，很多都需要练习 网上找了一个css的demo， 放到微信小程序后，可以运行 图片很大，没有弄，加载可能有点慢（不相关的，就不扯了...WebStorm：遇到的问题 这里，只要创建less文件，就会自动生成对
使用webstorm开发uniapp微信小程序不支持css单位rpx的解决方案
cabinx的博客
07-18 5732
启用小程序支持。
WebStorm 支持 rpx
MAIMIHO的博客
07-13 5923
目前 WebStorm 还不支持 国内特有的 rpx 单位. 写 rpx 格式化后会出错. 使用 less 的 unit 可以解决这个问题 将 XXrpx 改成 unit(XX, rpx); 就可以了 width: unit(64, rpx); height: unit(64, rpx); margin-left: unit(20, rpx);
Less小总结
weixin_30767835的博客
03-02 93
= 导航 顶部 变量 混合 继承 函数 顶部 变量 混合 继承 函数 Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。 Less要CSS语法的基...
rpx 格式化出错 -- ＞webstorm
qq_33247262的博客
12-18 3023
因为看了好多解决微信小程序在webstorm里面rpx报错的文章，都不行，原来最简单的方法就可以了,settings,直接在Plugins 搜索 Wxapp ，install ，然后重启webstorm就可以了 显示效果，没有飘红，无论是wxml或者是wxss ...
用less使页面随着屏幕放大缩小并用媒体查询
qq_57540936的博客
11-17 589
1.首先使less的使用方法： 先准备以下文件： 从这里去下载less.jsLess 中文网 也可以cdn引入 2.在页面中引入less，需要标注 ： rel="stylesheet/less"，js引入需要放在 link 后面，如下图： 3.在less文件中写样式，如下图： @rpx: 10rem; @media (min-aspect-ratio: 1920/1080) { html { font-size: calc(1000vh / 1080); ...
微信小程序学习笔记——样式 WXSS 【尺寸单位，样式导入，使用less或sass】
qq_37899792的博客
04-13 1947
1.尺寸单位 2.样式导入 3.选择器 4.小程序中使用less 1.尺寸单位 rpx(responsive pixel):可以根据屏幕宽度进行自适应，规定屏幕宽韦750rpx。如在iphone6上，屏幕宽度为375px,共有750个物理像素，则750rpx = 375px = 750物理像素， 1rpx = 0.5px =1物理像素。 需求如下 /* pages...
webstrom IDEA rpx 底下红色 “报错” 标注以及代码格式化 Ctrl(cmd)+ Alt(option) + L 后 数字与rpx之间出现空格的问题
ruiti的博客
03-20 3845
IDEA rpx底下红色 “报错” 标注以及代码格式化 Ctrl(cmd)+ Alt(option) + L 后 数字与rpx之间出现空格的问题，， 这个问题真的很蛋疼，，，查了好久，，看到有人还说，因为iDea 不支持rpx 最后使用了vs,,,,找了好久，，， Alt + Enter，关闭检查。 显示结果： 还是要下载：Wxapp Support 和e...
WebStorm使用less
xuanwuziyou的专栏
08-31 1万+
参考：使用less http://less.bootcss.com/#using-less 1. 安装node.js  (下载地址：https://nodejs.org/ ) 记下安装路径，如   D:\Program Files\nodejs 2. 打开命令行工具cmd，进入nodejs安装目录，输入命令：       d:   回车，再输入命令：      cd  D:\Pro
less 运算未生效解决办法
weixin_51545023的博客
04-30 886
less是编译未报错但是在开发者工具中确未生效如下图所示；解决办法是在 将 font-size: 320px / @no; 改为font-size: (320px / @no); 就会成功生效。
webstorm格式化快捷键
02-26
按下这个快捷键后，WebStorm会自动对选定的代码进行格式化，使其符合预定义的代码样式规范。 此外，你还可以通过以下步骤来格式化代码： 1. 在编辑器中选择要格式化的代码块。 2. 在菜单栏中选择"Code"。 3. 在下拉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Knight丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值