编译错误 SassError: Undefined operation: "calc($col / 12) times 100%".

[vulgarLover]

{ "dependencies": { "@babel/runtime": "^7.7.7", "@tarojs/cli": "3.2.5", "@tarojs/components": "3.2.5", "@tarojs/runtime": "3.2.5", "@tarojs/taro": "3.2.5", "@tarojs/react": "3.2.5", "big.js": "^6.1.0", "echarts-taro3-react": "^1.0.13", "react": "^17.0.2", "react-dom": "^17.0.0", "taro-skeleton": "^2.0.4", "taro-ui": "^3.0.0-alpha.3", "weapp-qrcode": "^1.0.0" }, "devDependencies": { "@babel/core": "^7.8.0", "@tarojs/mini-runner": "3.2.1", "@tarojs/webpack-runner": "3.2.1", "@types/react": "^17.0.2", "@types/webpack-env": "^1.13.6", "@typescript-eslint/eslint-plugin": "^4.15.1", "@typescript-eslint/parser": "^4.15.1", "babel-preset-taro": "3.2.1", "eslint": "^6.8.0", "eslint-config-taro": "3.2.1", "eslint-plugin-import": "^2.12.0", "eslint-plugin-react": "^7.8.2", "eslint-plugin-react-hooks": "^4.2.0", "stylelint": "9.3.0", "taro-iconfont-cli": "^3.2.1", "typescript": "^4.1.0" } }

npm run dev:weapp
� 编译失败. 2023/9/5 上午11:05:08

./src/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation: "calc($col / 12) times 100%".
on line 120 of node_modules/taro-ui/dist/style/components/flex.scss
from line 1 of D:\Code\Web\zmall-store\src\app.scss

$width: calc($col / 12) * 100%;

------------^

[taro-ui-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[vulgarLover]

windows node13.14.0

[robinv8]

升级taro 底层 3.4.x 即可解决
这是由于taro底层升级 node sass 导致的

[tuomiu]

升级taro 底层 3.4.x 即可解决 这是由于taro底层升级 node sass 导致的

升级到3.6.15，taro-ui 3.1.1，还是有这个问题

[robinv8]

@tuomiu 我本地 node 版本 v16.17.1，你可以通过 nvs 切换 node 版本试试，最好也提供一个 demo，我运行看看

[vulgarLover]

升级3.4不好使啊，新的错误，目前这个问题在同事的mac上都没有，我两个windows都会有同样的问题

[vulgarLover]

https://gitee.com/ysar/test-taro
@robinv8 可以帮忙看下吗，放了个demo，windows环境

[robinv8]

晚上回去试试

[vulgarLover]

@robinv8 怎么样

[robinv8]

@vulgarLover 卡在 npm install 报错上了

[kurtisjuwensx]

@robinv8 hello，这问题有进展么？我是3.6.17版本的taro，搭配3.1.1的taro-ui，现在也是启动就报错，node也换了v16.17.1，还是没用

[pinguo-zhonghuran]

请问问题解决了么 3.3.8 的 Taro 版本 ，搭配3.1.1的taro-ui，现在也是启动就报错

[pinguo-zhonghuran]

"taro-ui": "3.0.0-alpha.10" 这个版本解决问题

[pinguo-zhonghuran]

@robinv8 hello，这问题有进展么？我是3.6.17版本的taro，搭配3.1.1的taro-ui，现在也是启动就报错，node也换了v16.17.1，还是没用

"taro-ui": "3.0.0-alpha.10" 这个版本解决问题

[robinv8]

请问问题解决了么 3.3.8 的 Taro 版本 ，搭配3.1.1的taro-ui，现在也是启动就报错

taro@3.3.8 不能使用 taro-ui@3.1.1，从 taro-ui@3.1.0 开始对依赖库进行了大版本升级

[canyueduhong]

同样的报错，"taro-ui": "^3.0.0-alpha.1"， "@tarojs/cli": "3.4.1",

node 14.17.0 ，16.17.1都试了，不行

[robinv8]

@canyueduhong 提供个可以完整可以复现的 demo，今晚试试

[canyueduhong]

@canyueduhong 提供个可以完整可以复现的 demo，今晚试试
taro——测试代码.zip

好的，上面是我的项目代码，感谢大佬指点

[yoyo837]

“提供可复现的代码”重点在“可复现”，和有没有项目代码没关系, run 起来能看到错误即可，你可以删减你的代码，给到最小可复现，给个部分代码，还需要人去填的不叫复现，何况根本不知道怎么填。

[canyueduhong]

“提供可复现的代码”重点在“可复现”，和有没有项目代码没关系, run 起来能看到错误即可，你可以删减你的代码，给到最小可复现，给个部分代码，还需要人去填的不叫复现，何况根本不知道怎么填。

已经改好了最小可复现版本，多谢提醒

[robinv8]

@canyueduhong
在 package.json devDependencies 同级添加锁定 sass 版本的配置

"devDependencies"： {
……
},
// 锁定 sass 版本
"resolutions": {
    "sass": "1.62.0"
 },

[canyueduhong]

devDependencies

请问咱node版本是多少？我试了下还是同样的报错，代码结构为 "resolutions": {
"sass": "1.62.0"
},
"devDependencies": {

},

[robinv8]

node@14.18.0

[canyueduhong]

难道是m3芯片不行吗，哎

[robinv8]

那明早我用公司电脑试试

[canyueduhong]

找了一个以前能跑起来的node_modules压缩包，是好用的，我再研究研究，应该还是我的环境哪里导致的，跪谢大佬帮助！

[robinv8]

我在 M1 试了，添加我的配置也不会报错

[ly827]

折腾了一晚上各种升降版本，都没解决，最终还是改代码好了
node_modules/taro-ui/dist/style/components/flex.scss 120:13

$width: calc($col / 12) * 100%; => $width: calc(#{$col / 12} * 100%);

[robinv8]

@canyueduhong 提供个可以完整可以复现的 demo，今晚试试
taro——测试代码.zip

好的，上面是我的项目代码，感谢大佬指点

根据以上 demo 已找到解决办法。

报错原因

由于 taro 底层升级 node sass 导致的

解决方案

方案一：降低 sass 版本

在 package.json 中添加如下配置

"resolutions": {
    "sass": "1.62.0"
 },

方案二：升级 taro 相关依赖

在 package.json 中批量替换 taro 相关依赖版本 v3.4.5 及以上版本

示例如下：
https://github.com/NervJS/taro-ui/tree/next/examples/about-sass-version

[canyueduhong]

@canyueduhong 提供个可以完整可以复现的 demo，今晚试试
taro——测试代码.zip

好的，上面是我的项目代码，感谢大佬指点

根据以上 demo 已找到解决办法。

报错原因

由于 taro 底层升级 node sass 导致的

解决方案

方案一：降低 sass 版本

在 package.json 中添加如下配置

"resolutions": {
    "sass": "1.62.0"
 },

方案二：升级 taro 相关依赖

在 package.json 中批量替换 taro 相关依赖版本 v3.4.5 及以上版本

示例如下： https://github.com/NervJS/taro-ui/tree/next/examples/about-sass-version

可以了，感谢大佬帮助

[canyueduhong]

在我的项目中其实还有其他的代码报错，是因为taro-hooks的版本不兼容导致，后来我把版本号改成1.5.8就好了，这个提供给大家，如有遇到可做参考