HBuilderX 4.64创建uni-app vue3使用sass @use语法报错
HBuilderX 4.64创建uni-app vue3使用sass @use语法报错
示例代码：
[@use](/user/use) '@/style/style-mixin-components.scss' as componentMix
操作步骤：
- 本地运行编译
预期结果：
- 正常编译
实际结果：
- 编译报错：
[plugin:vite:css] [@use](/user/use) rules must be written before any other rules. [@use](/user/use) '@/style/style-mixin-components.scss' as componentMix;
bug描述：
HBuilderX 4.64创建uniapp，在编译的时候报错[@use](/user/use) rules must be written before any other rules.。
| 信息 | 值 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境版本号 | Windows 10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 4.64 |
| 手机系统 | Android |
| 手机系统版本号 | Android 10 |
| 手机机型 | 1 |
| 页面类型 | vue |
| vue版本 | vue3 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于HBuilderX 4.64创建uni-app vue3使用sass @use语法报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于HBuilderX 4.64创建uni-app vue3使用sass @use语法报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个报错是因为Sass的@use规则必须写在样式文件的最前面，不能在任何其他CSS规则之后。在Vite项目中，这个规则会被严格执行。
解决方案：
-
确保你的
@use语句是.scss文件中的第一条语句，前面不能有任何其他CSS规则或注释（除了//单行注释） -
检查你的
style-mixin-components.scss文件，确保它也没有在@use之前包含其他CSS规则 -
如果必须保留文件顶部的注释，可以使用Sass的单行注释
//而不是/* */ -
对于uni-app vue3项目，也可以考虑改用
[@import](/user/import)语法，它没有这个限制：
[@import](/user/import) '@/style/style-mixin-components.scss';