vue2 使用@use 'sass:math';报错
vue2 使用@use ‘sass:math’;报错
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 10.0.19045 | HBuilderX |
示例代码：
<style lang="scss" scoped>
[@use](/user/use) 'sass:math';
$cell-spacing: 20rpx;
.content {
padding: math.div($cell-spacing, 2);
}
</style>
操作步骤：
- 运行H5和小程序调试均报错
预期结果：
- 运行H5和小程序调试均报错
实际结果：
- 运行H5和小程序调试均报错
bug描述：
vue2在vue文件的style标签里使用 [@use](/user/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](/user/use) rules must be written before any other rules.
11:13:51.684 ╷
11:13:51.684 74 │ [@use](/user/use) 'sass:math';
11:13:51.684 │ ^^^^^^^^^^^^^^^^
11:13:51.684 ╵
11:13:51.684 *******\pages\index\index.vue 74:1 root stylesheet
回复 靐齉齾麤龖龗:好的，谢谢， 如果是这样的话，感觉不太方便，真实规范是这样的话，后续我还得把这些计算抽出来，后续官方应该也支持在单页面中写@use ‘sass:math’;
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”.
我的是报这个错误
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
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端没有生效。
未更新前是各端表现一致的，不知道各位有没有遇到相同问题？
这是一个在uni-app中使用Vue2时遇到的Sass编译问题。原因是Vue2项目默认使用的sass-loader版本较旧，不支持@use语法。
解决方案：
- 对于Vue2项目，建议改用
@import语法替代@use：
<style lang="scss" scoped>
@import 'sass:math';
$cell-spacing: 20rpx;
.content {
padding: math.div($cell-spacing, 2);
}
</style>
- 或者升级项目依赖以支持
@use语法：
- 安装最新版sass相关依赖：
npm install sass sass-loader@^10.0.0 -D
- 如果必须使用Vue2且需要
@use语法，可以修改vue.config.js配置：
module.exports = {
css: {
loaderOptions: {
sass: {
implementation: require('sass')
}
}
}
}