3.0.0-alpha.3，启动报错 "SassError: @use rules must be written before any other rules." 删掉dist中的 toast.scss 文件下的 @use "sass:math"; 恢复正常

LvJiaLei666 commented 4 months ago

Taro UI 版本信息

v3.0.0-alpha.3

问题描述

taro-ui版本：3.0.0-alpha.3
启动报错 "SassError: @use rules must be written before any other rules."

复现步骤

taro-ui版本：3.0.0-alpha.3

按需引入 import 'taro-ui/dist/style/components/toast.scss' 2.启动报错 "SassError: @use rules must be written before any other rules." 3.删掉dist中的 toast.scss 文件下的 @use "sass:math"; 恢复正常

复现代码

import { Component } from 'react' import { Block, View, Text, Image, Button } from '@tarojs/components' import Taro, { getCurrentInstance } from '@tarojs/taro' import { AtToast, AtModal, AtModalContent, AtModalAction, AtModalHeader } from 'taro-ui' import 'taro-ui/dist/style/components/toast.scss'

...

报错信息

./node_modules/taro-ui/dist/style/components/toast.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: @use rules must be written before any other rules.

系统信息

👽 Taro v3.3.18

Taro CLI 3.3.18 environment info: System: OS: macOS 13.5.1 Shell: 5.9 - /bin/zsh Binaries: Node: 14.6.0 - ~/.nvm/versions/node/v14.6.0/bin/node npm: 6.14.6 - ~/.nvm/versions/node/v14.6.0/bin/npm npmPackages: @tarojs/cli: 3.3.18 => 3.3.18 @tarojs/components: 3.3.18 => 3.3.18 @tarojs/mini-runner: 3.3.18 => 3.3.18 @tarojs/react: 3.3.18 => 3.3.18 @tarojs/runtime: 3.3.18 => 3.3.18 @tarojs/taro: 3.3.18 => 3.3.18 @tarojs/webpack-runner: 3.3.18 => 3.3.18 babel-preset-taro: 3.3.18 => 3.3.18 eslint-config-taro: ^3.6.2 => 3.6.29 eslint-plugin-taro: ^3.3.20 => 3.3.20 react: ^17.0.0 => 17.0.2 taro-ui: ^3.0.0-alpha.3 => 3.3.0

补充信息

taro-ui-bot[bot] commented 4 months ago

欢迎提交 Issue~

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

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

Good luck and happy coding~

robinv8 commented 4 months ago

之前有类似的问题，https://github.com/NervJS/taro-ui/issues/1746 需要再 Taro 上修复该问题，但并不适用于你当前版本，在该 issue 中也提供了 patch 的办法，你可以试试，如果有难度，可以尝试如下方式。

https://github.com/NervJS/taro-ui/issues/1726 中汇总了多种引入方式，你可以选择其中一种

LvJiaLei666 commented 4 months ago

感谢回答已解决问题但是想问下为什么我使用的是小程序端也会受到rn-style-transform的影响是所有的样式都要转一下嘛还有就是修复这个问题为什么还不适用我这个版本

robinv8 commented 4 months ago

感谢回答已解决问题但是想问下为什么我使用的是小程序端也会受到rn-style-transform的影响是所有的样式都要转一下嘛还有就是修复这个问题为什么还不适用我这个版本

具体还需要研究下，暂时没时间，能解决问题就行，如果再遇到问题再来提 issue

NervJS / taro-ui