1***@qq.com

发布：2025-03-13 11:32
更新：2025-03-13 17:52
阅读：81

【报Bug】vue2 使用@use 'sass:math';报错

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10 10.0.19045

HBuilderX类型：正式

HBuilderX版本号： 4.56

浏览器平台： Chrome

浏览器版本： 134

项目创建方式： HBuilderX

示例代码：

<style lang="scss" scoped>  
@use 'sass:math';  
$cell-spacing: 20rpx;  
.content {  
  padding: math.div($cell-spacing, 2);  
}  
</style>

操作步骤：

运行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

2025-03-13 11:32 负责人:无分享

3 个回复

x***@sina.com

我也碰到了, @use 'sass:math'; 放在哪都不行, 不知道什么情况;

DCloud_UNI_HT

现在在 vue 页面内使用 @use ‘sass:math’ 确实有些问题，后续会排查修复，暂时绕过方案，你可以在项目根目录下的 uni.scss 中声明全局变量使用：

// uni.scss  
@use 'sass:math';    
$cell-spacing: 20rpx;    
$padding: math.div($cell-spacing, 2);

页面内：

// index.vue  
<style lang="scss" scoped>    

.content {    
  padding: $padding;    
}    
</style>

3***@qq.com

vue2项目，@use 'sass:math'; 放在哪都不行（包括uni.scss）

要回复问题请先登录或注册

【报Bug】vue2 使用@use 'sass:math';报错

示例代码：

`<style lang="scss" scoped> @use 'sass:math'; $cell-spacing: 20rpx; .content { padding: math.div($cell-spacing, 2); } </style>`

操作步骤：

运行H5和小程序调试均报错

预期结果：

运行H5和小程序调试均报错

实际结果：

运行H5和小程序调试均报错

bug描述：

3 个回复

公告

相关问题

【报Bug】vue2 使用@use 'sass:math';报错

示例代码： <style lang="scss" scoped> @use 'sass:math'; $cell-spacing: 20rpx; .content { padding: math.div($cell-spacing, 2); } </style>

操作步骤： 运行H5和小程序调试均报错

预期结果： 运行H5和小程序调试均报错

实际结果： 运行H5和小程序调试均报错

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

示例代码：

`<style lang="scss" scoped> @use 'sass:math'; $cell-spacing: 20rpx; .content { padding: math.div($cell-spacing, 2); } </style>`

操作步骤：

运行H5和小程序调试均报错

预期结果：

运行H5和小程序调试均报错

实际结果：

运行H5和小程序调试均报错