手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

Resolve: Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
 
在用UNIAPP开发小程序的时候,只要运行pnpm dev:mp-weixin,就会报一堆这样的错误,但也没办法,毕竟你也不知道 哪些库就是用了一些旧方法,由于uniapp的cli模式默认用的是vite,所以搜了一下,网上的教程都是说,增加 css.preprocessorOptions.scss.api 为 modern或者modern-compiler就OK了。但试了一下,这根本就没用。
 
再看了一下github上,说增加这个,只对H5项目有效,其他项目均无效。
此时突然看到有人说,其实还要加一个参数,和api平级,silenceDeprecations:['legacy-js-api']就行了。
于是,加入后重启pnpm,果然干净了。
 
完整配置如下:
XML/HTML代码
  1. css: {  
  2.   preprocessorOptions: {  
  3.     scss: {  
  4.       api: 'modern-compiler',  
  5.       silenceDeprecations: ['legacy-js-api'],  
  6.     },  
  7.   },  
  8. },  
至此,一切OK
 
 

uniapp的button如何去除边框

在使用uniapp的时候,不可避免会用到他的button组件,如果需要对button进行自定义,就会发现他的边框怎么都占了坑位,如果你还有自定义radius,就会发现整个圆角全是毛边。这时候 就想着要去除边框了。

 
网传的方法大致 有两种 
1、如果全部要自定义的,可以直接 button::after{ border: none;}
2、还有一种是针对button的plain模式,这种模式下button样式简单,可以 button[plain]{ border: none;}
 
 

小程序字体的处理

 小程序里自定义字体实话实说是一件很痛苦的事情。如果为了好看,只弄英文字体硬实还没那么让人纠结,但事实上中文才是让人最头疼的。一个正常的中文字体少说8M左右,如何字库全一点的。20多M也不是不可能。放进APP可能还能接受,但放到小程序,好吧,直接放不下。

 
所以网上就有各种不同的工具,而且小程序也支持引入全部字体,常见的方法就是那么几种
1、非中文字体,比如图标,直接用iconfont,因为他支持网络字体和本地字体两种,如果不大就本地字体吧
2、英文,转成woff后,估计也没多少了,毕竟正常使用也就26个英文字母+10个数字,再不济加上一些标点符号。ASCII的可见字符基本上就可以在正常的页面里全部使用到了
3、中文,这才是大头,之前写过一篇:字体转换相关 ,但其实现在想想,这个有点偏手动了。
 
所以针对3,我们需要重新整理一下,原贴里的sfntool仍然需要,但这个工具有个小缺点,即不支持woff2,但也有个优点,即eot可以压缩,这样的话,处理英文字体就可以更小了。
处理中文分这么几步
1、获取项目中所有出现的中文,比如src目录下,针对vue/js/ts/jsx/tsx等文件,忽略css文件和图标等,将中文取出来去个重(不去也影响不大)。这个脚本可以自己写也可以用网上的一些开源库,象字蛛之类的。如果懒得找,问一下狗屁通,估计就能直接写了
2、传入sfntool中,生成相应的字体,目前看来,如果不压缩,woff会是比较小一点的
3、最重要的就是这一步,有多种处理:a.如果字体不大,就直接扔static里,建一个font.scss就行;b.如果字体不是太大,比如只有7、80K,可以考虑base64一下在font-family的url里,直接用base64;c.如果超过80K以上,建议直接上传到CDN去,毕竟这玩意其实还没有小程序的素材大,现在哪个图片不是要上百K的?
 
在这样的基础下,再利用package.json创建一个命令,就可以一键生成了,比如我现在就是这样,类似:java -jar sfntool.jar -s "$(node chinese.ts)" infile outfile && node base64.ts && node font-upload.ts
 
只是一个简单的描述处理方式 ,其实都可以在base64.ts里进行判断和处理,但基于一事一做的原则还是多拆开了。
字体处理就是这样,说方便也方便说复杂也复杂。

Tags: chatgpt, sfntool

第一次 node 编译前端项目到内存不够

在编译前端项目的时候报错:FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

 
真的是第一次遇到,PHP 就不会出现这种问题,哈哈
内存还是小了点。然后估计我还是要清理和合并掉一些包,不然在小内存(1G)的机器上估计还会有问题。
 
小内存的机器看来可以利用 git 的 action,在编译好之后把构建复制过去,也是个办法。

字体转换相关

 小程序里最烦人的就是自定义字体了。设计师们总喜欢用一些看起来很好看的字体。但对于小程序来说简直是个灾难。

所幸,如果是英文字体的话,一般都只有8~10K,但那些 OTF 其实还是很大,而且不少字体中有一些特殊的符号,比如@这些。但事实上很多时候我们都不需要。所以这时候就要转换一下。。。
1、convert OTF to TTF
2、用 sfnttools.jar 包(网上都是这个名儿)。来进行转换,类似 java -jar sfnttool.jar -s '内容,也可以是文件' 源字符.ttf 生成的.ttf 
3、如果字体还大于50K 的话,转换成 base64
4、如果小于50K,直接就可以引用了。。。。
 
大致这样。。
 
1、https://cloudconvert.com/otf-to-ttf
2、https://www.giftofspeed.com/base64-encoder/
3、fonttool.jar
 
参考:https://blog.zengrong.net/post/font_trim_replacement_converting/
 
 
jar 包的详细用法可以直接命令行看
XML/HTML代码
  1. java -jar sfnttool.jar -h    
  2. subset [-?|-h|-help] [-b] [-s string] fontfile outfile    
  3. prototype font subsetter    
  4.         -?,-help        print this help information    
  5.         -s,-string       string to subset    
  6.         -b,-bench        benchmark (run 10000 iterations)    
  7.         -h,-hints        strip hints    
  8.         -w,-woff         output woff format    
  9.         -e,-eot  output eot format    
  10.         -x,-mtx  enable microtype express compression for eot format   
 
 
 
Records:30212345678910»