全局引入tari-ui样式不生效
tuao525 opened this issue · 9 comments
问题描述
复现步骤
// 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 期望行为
报错信息
系统信息
补充信息
欢迎提交 Issue~
如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏
如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。
Good luck and happy coding~
如果是 RN 环境，应该缺配置，在 config 添加如下配置：
{
alias: {
'~taro-ui/dist': '~taro-ui/rn'
}
}
我的是在h5项目中，加了这行代码还是报错
局部引入单独的scss有效，在app.scss中引入全局样式就会报错
提供一个可复现的 demo，方便排查问题
在以下版本信息中，并无报错
"taro-ui": "^3.0.0-alpha.10",
sass-loader: "version": "12.4.0",
webpack 5.89.0
node 16
请对齐下版本信息，若还报错请提供下你的先相关版本
Hello~
您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。
如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。
Good luck and happy coding~
Hello~
您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。
如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。
Good luck and happy coding~
安装问题，已经解决，将@tarojs/cli和taro-ui升级到最新版也可以，只是样式会有问题