patch-package：taro-ui引入报错 Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0

前言

在使用taro ui时候报错如下

> Executing task: yarn run dev:weapp <

yarn run v1.22.17

$ npm run build:weapp -- --watch

> turntable@1.0.0 build:weapp

> taro build --type weapp "--watch"

 Taro v3.4.8

Tips: 预览模式生成的文件较大，设置 NODE_ENV 为 production 可以开启压缩。

Example:

$ set NODE_ENV=production && taro build --type weapp --watch

启动  开发者工具-项目目录  D:\code\turntable\dist

生成  工具配置  D:\code\turntable\dist/project.config.json

编译  发现入口  src/app.ts

编译  发现页面  src/pages/game/index.tsx

编译  发现页面  src/pages/index/index.tsx

编译  发现页面  src/pages/me/index.tsx

- 正在编译...

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($at-button-height, 2) or calc($at-button-height / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷

87 │     border-radius: $at-button-height / 2;

   │                    ^^^^^^^^^^^^^^^^^^^^^

   ╵

    node_modules\taro-ui\dist\style\components\button.scss 87:20  root stylesheet

由输出信息推测可得知 sass v2.0已经删除了width: $var / 2这种写法，改成了width: calc($var / 2)写法看接下来的步骤

修复报错的地方

如果一个一个手动改，当然没问题，有点麻烦，要改几十处或者上百处

所以我们使用sass官方推荐的自动升级写法的插件sass-migrator

# yarn

yarn add --dev sass-migrator

执行自动适配升级

注意如果是windows下，建议用git bash执行下命令，windows终端有兼容问题，可能无效

$ ./node_modules/.bin/sass-migrator division ./node_modules/taro-ui/dist/style/components/*.scss

执行完毕，进入node_module/taro-ui，会发现刚才报错的地方，已经自动升级了

将修改的地方打包

如上，虽然修复了问题，可是以上报错信息是在人家封装三方包里node_module/taro-ui，我们直接去改并且使用了，可是如果我重新安装依赖或者升级就又丢了，那怎么做呢？

使用patch-package工具

yarn add --dev patch-package

将修改的地方进行打包操作

 ./node_modules/.bin/patch-package taro-ui

执行完成后，会在项目根目录的 patches 目录中创建补丁文件 taro-ui+3.0.0-alpha.3.patch，这个补丁需要提交到你项目代码仓库中

在 package.json 的 scripts 中加入 "postinstall": "patch-package"，后续执行 npm install 或 yarn install 命令时，会自动为依赖包打补丁了

一键解决

当然你觉得以上步骤麻烦，我提供了一键解决的脚本。

请将一下代码保存至一个脚本文件中，比如 fix-scss.sh，然后去执行它即可。

如果是windows请用bash模拟工具执行，如git bash

echo "---===installation dependency===---"

yarn add --dev sass-migrator patch-package postinstall-postinstall

echo "use sass-migrator to fix problems"

./node_modules/.bin/sass-migrator division ./node_modules/taro-ui/dist/style/components/*.scss

echo "---===use patch-package to save this edit===---"

./node_modules/.bin/patch-package taro-ui

echo "---===use postinstall-postinstall to automatic operation in the future===---"

hasPostinstall=$(grep '"postinstall":' package.json)

if [[ "$hasPostinstall" != "" ]];then

    echo "Make sure your package.json has following [script:{\"postinstall\": \"patch-package\", ...]"

else

    scriptLine=$(grep -n '"scripts": {' package.json  | cut -d : -f 1)

    newScript=$(sed "${scriptLine}a\    \"postinstall\": \"patch-package\"," package.json)

    echo "$newScript" > package.json

    echo "done!"

fi

参考

https://blog.csdn.net/m0_54854484/article/details/123080841

https://github.com/NervJS/taro-ui/issues/1462

https://shawchen08.github.io/2020/05/24/patch-package/

https://lequ7.com/guan-yu-sass-cong-sassbreakingchangeslashasdivision-shuo-qi.html

后续

目前pnpm暂不支持此包，因为pnpm自研了补丁系统

 https://blog.csdn.net/qq_45585640/article/details/128772678