Taro react 抖音项目接入nutui-taro编译报错

[zmm2tysu]

NutUI scenes（nutui 场景）

小程序（@nutui/nutui-react-taro）

NutUI-react version（nutui-react 版本）

1.5.1

React version（react 版本）

18.0.0

Operating environment（运行环境）

dev:tt

Citation method（引用方式）

npm

Node version（node 版本）

16.10.0

Browser and its version（浏览器及其版本）

chrome(100.0.4896.75)

System and its version（系统及其版本）

macOS (12.5)

Taro environmental information（taro 环境信息）

👽 Taro v3.6.5

  Taro CLI 3.6.5 environment info:
    System:
      OS: macOS 12.5
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.5 => 3.6.5 
      @tarojs/components: 3.6.5 => 3.6.5 
      @tarojs/helper: 3.6.5 => 3.6.5 
      @tarojs/mini-runner: 3.6.5 => 3.6.5 
      @tarojs/plugin-framework-react: 3.6.5 => 3.6.5 
      @tarojs/plugin-html: ^3.6.5 => 3.6.5 
      @tarojs/plugin-platform-alipay: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-jd: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-qq: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-swan: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-tt: 3.6.5 => 3.6.5 
      @tarojs/plugin-platform-weapp: 3.6.5 => 3.6.5 
      @tarojs/react: 3.6.5 => 3.6.5 
      @tarojs/runtime: 3.6.5 => 3.6.5 
      @tarojs/shared: 3.6.5 => 3.6.5 
      @tarojs/taro: 3.6.5 => 3.6.5 
      @tarojs/webpack5-runner: 3.6.5 => 3.6.5 
      babel-preset-taro: 3.6.5 => 3.6.5 
      eslint-config-taro: 3.6.5 => 3.6.5 
      react: ^18.0.0 => 18.2.0 
      taro-ui: ^3.1.0-beta.2 => 3.1.0-beta.4 

Reproduction link（重现链接）

https://xxx.xxxx.com/

Steps to reproduce（重现步骤）

yarn build:tt

What is expected?（期望的结果是什么？）

打包成功

What is actually happening?（实际的结果是什么？）

Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation "var(--nutui-font-size-2, 14px) * 1.5".
   ╷
89 │       padding-bottom: $spacing-v-lg - (($at-toast-font-size * $line-height-zh - $at-toast-font-size) * 0.5);
   │                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/taro-ui/dist/style/components/toast.scss 89:41  @import
  node_modules/taro-ui/dist/style/components/index.scss 52:9   @import
  node_modules/taro-ui/dist/style/index.scss 13:9              root stylesheet

Remarks（补充说明）

背景：react + less的项目，已使用Taro-UI，现在想按需加载Nut-UI 集成本插件参考文档：https://nutui.jd.com/taro/react/1x/#/zh-CN/guide/starttaro-react

package.json

{
    "name": "tt_car",
    "version": "1.0.0",
    "private": true,
    "description": "tt_car",
    "templateInfo": {
        "name": "taro-ui",
        "typescript": true,
        "css": "less"
    },
    "scripts": {
        "build:weapp": "taro build --type weapp",
        "build:swan": "taro build --type swan",
        "build:alipay": "taro build --type alipay",
        "build:tt": "taro build --type tt",
        "build:h5": "taro build --type h5",
        "build:rn": "taro build --type rn",
        "build:qq": "taro build --type qq",
        "build:jd": "taro build --type jd",
        "build:quickapp": "taro build --type quickapp",
        "dev:weapp": "npm run build:weapp -- --watch",
        "dev:swan": "npm run build:swan -- --watch",
        "dev:alipay": "npm run build:alipay -- --watch",
        "dev:tt": "npm run build:tt -- --watch",
        "dev:h5": "npm run build:h5 -- --watch",
        "dev:rn": "npm run build:rn -- --watch",
        "dev:qq": "npm run build:qq -- --watch",
        "dev:jd": "npm run build:jd -- --watch",
        "dev:quickapp": "npm run build:quickapp -- --watch"
    },
    "browserslist": [
        "last 3 versions",
        "Android >= 4.1",
        "ios >= 8"
    ],
    "author": "",
    "dependencies": {
        "@babel/runtime": "^7.7.7",
        "@nutui/nutui-react-taro": "^1.5.1",
        "@tarojs/components": "3.6.5",
        "@tarojs/helper": "3.6.5",
        "@tarojs/mini-runner": "3.6.5",
        "@tarojs/plugin-framework-react": "3.6.5",
        "@tarojs/plugin-html": "^3.6.5",
        "@tarojs/plugin-platform-alipay": "3.6.5",
        "@tarojs/plugin-platform-jd": "3.6.5",
        "@tarojs/plugin-platform-qq": "3.6.5",
        "@tarojs/plugin-platform-swan": "3.6.5",
        "@tarojs/plugin-platform-tt": "3.6.5",
        "@tarojs/plugin-platform-weapp": "3.6.5",
        "@tarojs/react": "3.6.5",
        "@tarojs/runtime": "3.6.5",
        "@tarojs/shared": "3.6.5",
        "@tarojs/taro": "3.6.5",
        "babel-plugin-import": "^1.13.6",
        "dva-core": "^2.0.4",
        "dva-loading": "^3.0.22",
        "postcss": "^8.4.23",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-redux": "^8.0.5",
        "redux": "^4.2.0",
        "taro-skeleton": "^2.0.4",
        "taro-ui": "^3.1.0-beta.2"
    },
    "devDependencies": {
        "@babel/core": "^7.8.0",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
        "@tarojs/cli": "3.6.5",
        "@tarojs/webpack5-runner": "3.6.5",
        "@types/react": "^18.0.0",
        "@types/webpack-env": "^1.13.6",
        "@typescript-eslint/eslint-plugin": "^5.20.0",
        "@typescript-eslint/parser": "^5.20.0",
        "babel-preset-taro": "3.6.5",
        "eslint": "^8.12.0",
        "eslint-config-prettier": "^8.6.0",
        "eslint-config-taro": "3.6.5",
        "eslint-plugin-import": "^2.12.0",
        "eslint-plugin-react": "^7.8.2",
        "eslint-plugin-react-hooks": "^4.2.0",
        "prettier": "^2.8.4",
        "react-refresh": "^0.11.0",
        "stylelint": "9.3.0",
        "typescript": "^4.1.0",
        "webpack": "5.69.0"
    }
}

按照文档接入Nut-UI后编译报错

[canyuegongzi]

解决了吗

[xiaoyatong]

问题已定位，是因为SASS变量命名冲突，修复中。

[canyuegongzi]

问题已定位，是因为SASS变量命名冲突，修复中。

大概什么时候呢 或者能发一下fix分支吗

[jiangshengdev]

期待修复

https://nutui.jd.com/taro/react/1x/#/zh-CN/component/toast

目前只能先把 Taro-UI 的吐司组件修改为 Nut-UI 的，然后全部 Taro-UI 组件改为按需引入（样式还需要调整）。