启动编译失败

[chenyin1998]

相关平台

微信小程序

小程序基础库: 2.16.0
使用框架: React

复现步骤

🙅 编译失败. 2024/5/17 17:25:38

./node_modules/taro-ui/dist/style/index.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 6 of node_modules/taro-ui/dist/style/components/index.scss
from line 12 of C:\project\乐至\lezhi-small-power\node_modules\taro-ui\dist\style\index.scss

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

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

监听文件修改中...

./node_modules/taro-ui/dist/style/index.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 6 of node_modules/taro-ui/dist/style/components/index.scss
from line 12 of C:\project\乐至\lezhi-small-power\node_modules\taro-ui\dist\style\index.scss

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

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

at C:\project\乐至\lezhi-small-power\node_modules\webpack\lib\NormalModule.js:316:20
at C:\project\乐至\lezhi-small-power\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\project\乐至\lezhi-small-power\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\project\乐至\lezhi-small-power\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.callback (C:\project\乐至\lezhi-small-power\node_modules\sass-loader\dist\index.js:73:7)
at Object.done [as callback] (C:\project\乐至\lezhi-small-power\node_modules\neo-async\async.js:8069:18)
at options.error (C:\project\乐至\lezhi-small-power\node_modules\node-sass\lib\index.js:294:32)

@ ./src/app.js (./node_modules/babel-loader/lib!./src/app.js) 13:0-39
@ ./src/app.js

(node:25108) UnhandledPromiseRejectionWarning: [object Array]
(Use node --trace-warnings ... to show where the warning was created)
(node:25108) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:25108) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

期望结果

能正常编译

实际结果

编译失败无法运行

环境信息

👽 Taro v3.6.29


  Taro CLI 3.6.29 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 14.21.3 - C:\Program Files\nodejs\node.EXE
      npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: ^3.1.5 => 3.1.5
      @tarojs/components: 3.1.4 => 3.1.4
      @tarojs/mini-runner: 3.1.4 => 3.1.4
      @tarojs/react: 3.1.4 => 3.1.4
      @tarojs/runtime: 3.1.4 => 3.1.4
      @tarojs/taro: 3.1.4 => 3.1.4
      @tarojs/webpack-runner: 3.1.4 => 3.1.4
      babel-preset-taro: 3.1.4 => 3.1.4
      eslint-config-taro: 3.1.4 => 3.1.4
      react: ^17.0.0 => 17.0.2
      taro-ui: ^3.0.0-alpha.10 => 3.3.0

[koppthe]

从报错信息可以看出 Taro 依赖的 Sass 版本过旧了，目前 Taro 最新版本依赖的是 Sass v1.50.0，这个版本不支持该语法

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

Sass v1.77.2 版本确实支持该语法
https://sass-lang.com/playground/#eJwzNFRJzs+xUjA0MjCw5lIpz0wpybBSSE7MSdYASSjoA2U0FbQUDA0MVK25uPRKUotLFKq5FBSgKiE6rLlqAbyoE58=

解决办法

方案一：手动升级 sass 依赖；
方案二：更改写法

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