全局引入tari-ui样式不生效

[tuao525]

问题描述

复现步骤

// app.scss
@import '~taro-ui/dist/style/index.scss';

// package.json
"dependencies": {
    "@babel/runtime": "^7.7.7",
    "@hookform/error-message": "^2.0.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/cameraroll": "^4.0.4",
    "@react-native-community/segmented-control": "^2.2.2",
    "@react-native-community/slider": "^3.0.3",
    "@react-pdf/renderer": "^2.0.21",
    "@sentry/react": "^6.13.2",
    "@sentry/tracing": "^6.13.2",
    "@tarojs/cli": "3.3.7",
    "@tarojs/components": "3.3.7",
    "@tarojs/plugin-platform-alipay": "3.3.7",
    "@tarojs/plugin-platform-swan": "3.3.7",
    "@tarojs/plugin-platform-weapp": "3.3.7",
    "@tarojs/react": "3.3.7",
    "@tarojs/rn-runner": "3.3.7",
    "@tarojs/runtime": "3.3.7",
    "@tarojs/taro": "3.3.7",
    "@tarojs/taro-rn": "3.3.5",
    "@tarojs/webpack-runner": "3.3.7",
    "babel-preset-taro": "3.3.7",
    "dayjs": "^1.10.6",
    "default-passive-events": "^2.0.0",
    "image-conversion": "^2.1.1",
    "lodash": "^4.17.21",
    "lodash.js": "^0.0.1-security",
    "nervjs": "^1.5.7",
    "pont-engine": "^1.3.3",
    "pulltorefreshjs": "^0.1.22",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-hook-form": "^7.19.1",
    "react-native": "^0.64.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-keyboard-aware-scroll-view": "^0.9.4",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-pager-view": "^5.4.0",
    "react-native-svg": "^12.1.1",
    "react-pdf": "^5.5.0",
    "react-pdf-js": "^5.1.0",
    "react-redux": "^7.2.4",
    "react-transition-group": "^4.4.2",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "taro-ui": "^3.0.0-alpha.10",
    "tarojs-router-next": "^2.3.1",
    "vconsole": "^3.9.1"
  },

报错
🙅   Failed to compile.

./src/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation "calc($col / 12) * 100%".
    ╷
120 │     $width: calc($col / 12) * 100%;
    │             ^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\taro-ui\dist\style\components\flex.scss 120:13  @import
  node_modules\taro-ui\dist\style\components\index.scss 6:9    @import
  node_modules\taro-ui\dist\style\index.scss 12:9              @import
  src\app.scss 3:9 

期望行为

报错信息

系统信息

补充信息

[taro-ui-bot[bot]]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[robinv8]

如果是 RN 环境，应该缺配置，在 config 添加如下配置：

 {
   alias: {
      '~taro-ui/dist': '~taro-ui/rn'
    }
}

详情如下： https://github.com/robinv8/taro-rn-webpack5-demo/blob/759fdb74e3a59e713d79a5b61445fe16e3e713d6/config/index.ts#L22

[tuao525]

我的是在h5项目中，加了这行代码还是报错

[tuao525]

局部引入单独的scss有效，在app.scss中引入全局样式就会报错

[robinv8]

提供一个可复现的 demo，方便排查问题

[ImpTyrion]

在以下版本信息中，并无报错 "taro-ui": "^3.0.0-alpha.10", sass-loader: "version": "12.4.0", webpack 5.89.0 node 16 请对齐下版本信息，若还报错请提供下你的先相关版本

[taro-ui-bot[bot]]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[taro-ui-bot[bot]]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[tuao525]

安装问题，已经解决，将@tarojs/cli和taro-ui升级到最新版也可以，只是样式会有问题