<style lang="scss" scoped>
@use 'sass:math';
$cell-spacing: 20rpx;
.content {
padding: math.div($cell-spacing, 2);
}
</style>
1***@qq.com
- 发布：2025-03-13 11:32
- 更新：2025-04-10 10:09
- 阅读：1786
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10 10.0.19045
HBuilderX类型： 正式
HBuilderX版本号： 4.56
浏览器平台： Chrome
浏览器版本： 134
项目创建方式： HBuilderX
示例代码：
操作步骤：
运行H5和小程序调试均报错
运行H5和小程序调试均报错
预期结果：
运行H5和小程序调试均报错
运行H5和小程序调试均报错
实际结果：
运行H5和小程序调试均报错
运行H5和小程序调试均报错
bug描述：
vue2在vue文件的style标签里使用 @use 'sass:math'; 会报错，vue3可以正常使用
11:13:51.684 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
11:13:51.684 SassError: @use rules must be written before any other rules.
11:13:51.684 ╷
11:13:51.684 74 │ @use 'sass:math';
11:13:51.684 │ ^^^^^^^^^^^^^^^^
11:13:51.684 ╵
11:13:51.684 *******\pages\index\index.vue 74:1 root stylesheet
7 个回复
最佳回复
DCloud
HBuilderX 4.61.2025040322-alpha 已修复。
x***@sina.com
我也碰到了, @use 'sass:math'; 放在哪都不行, 不知道什么情况;
DCloud_UNI_HT
现在在 vue 页面内使用 @use ‘sass:math’ 确实有些问题，后续会排查修复，暂时绕过方案，你可以在项目根目录下的
uni.scss中声明全局变量使用：页面内：
9***@qq.com
这个方法可行
2025-03-14 19:31
3***@qq.com
vue2项目，@use 'sass:math'; 放在哪都不行（包括uni.scss）
DCloud_UNI_HT
uni.sass 是可行，看看你 怎么写的 ？报什么错误
2025-03-14 14:44
巷子
回复 DCloud_UNI_HT:
// uni.scss
@use 'sass:math';
// index.vue
$cell-spacing: 20rpx;
$padding: math.div($cell-spacing, 2);
早上试了一下似乎也会报，时间原因没有深入，4.56版本
2025-03-14 17:47
小黑仔子
回复 巷子: 我这也是一样。跑不起来了。
2025-03-15 12:07
小黑仔子
回复 小黑仔子: @ DCloud_UNI_HT
2025-03-15 12:07
小黑仔子
回复 DCloud_UNI_HT:
还是依然报错，请看看。
2025-03-15 12:14
靐齉齾麤龖龗
回复 巷子: 这个$padding使用math的话应该一起放到uni.scss里面，然后在单页里面使用。而不是uni.scss里面定义，却跑到单页里面使用math.div
2025-03-17 10:18
巷子
回复 靐齉齾麤龖龗:好的，谢谢， 如果是这样的话，感觉不太方便，真实规范是这样的话，后续我还得把这些计算抽出来，后续官方应该也支持在单页面中写@use 'sass:math';
2025-03-17 10:41
巷子
回复 小黑仔子: 看楼下大哥回复，应该可以
2025-03-17 10:41
靐齉齾麤龖龗
回复 巷子: 你可以在uni.scss里面定义一个scss方法，然后在页面里面可以直接使用该函数传参进去，应该就可以规避了，不过我没试过
2025-03-17 10:44
巷子
回复 靐齉齾麤龖龗: 好的，谢谢，后续我试试
2025-03-17 13:22
w***@163.com
Uncaught Error: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "math".
我的是报这个错误
w***@163.com
放在uni.scss也不行
2025-03-20 20:45
z***@foxmail.com
vue3 也有相同的问题
环境：
目前 sass 升级到1.86.0; "@dcloudio/uni-app": "3.0.0-alpha-4050720250320001",
问题描述：
原有使用@import 的语法，会出现
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
自定义使用@use 语法均会出现
SassError: @use rules must be written before any other rules.
分析原因：
uniapp 优先将 uni.scss 以@import 的方式引用每个 vue 文件的<script>
解决方案：
建议官方，将默认的导入方式由@import改为@use uni.scss as *;
关联问题：https://ask.dcloud.net.cn/question/207629
DCloud_UNI_FengXY
vue3目前是读取的uni.scss文件内容，通过additionalData传入的，并没有使用@import，vue2之前是@import，4.61会调整成@use。你的那个报错应该不是uni.scss引发的，是不是有三方库或者自己代码里，哪里用到了@import
2025-04-03 19:15
1888 - 1888
4.57
vue2 manifest.json已配置"sassImplementationName" : "node-sass"
在App.vue中引入全局公共样式文件#import url("./xxx/common.css")时，自定义组件<style lang="scss" scoped>，发现app端和微信小程序表现不一致
例如common.css中列明.flex{display:flex}，在自定义组件A的元素中赋类class=“flex"，微信小程序生效，APP端没有生效。
未更新前是各端表现一致的，不知道各位有没有遇到相同问题？
DCloud_UNI_FengXY
可以提供一个测试项目
2025-04-10 13:14
1888
回复 DCloud_UNI_FengXY: 更正一下，https://ask.dcloud.net.cn/question/207891?column=log&rf=false
2025-04-10 16:01