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

[LvJiaLei666]

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

1. 按需引入 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]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[robinv8]

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

#1726 中汇总了多种引入方式，你可以选择其中一种

[LvJiaLei666]

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

[robinv8]

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

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