uni-app style 代码提示填充错误

操作步骤：

在<style>中输入@include或者@mixin或则@extend后，选择代码提示中的选项，按下回车键就复现了

预期结果：

<style lang="scss" scoped>  
[@include](/user/include) ;  
</style>

<style lang="scss" scoped>  
[@mixin](/user/mixin) ;  
</style>

<style lang="scss" scoped>  
[@extend](/user/extend) ;  
</style>

实际结果：

<style lang="scss" scoped>  
@inc  
@includetyle>
</style>

<style lang="scss" scoped>  
@mi  
@mixinstyle>
</style>

<style lang="scss" scoped>  
@ex  
[@extend](/user/extend)/style>
</style>

bug描述：

<style lang="scss" scoped>  
在这里输入@inc ，选择代码提示中的[@include](/user/include)后，代码填充错误。  
或者输入@mix，选择代码提示中的[@mixin](/user/mixin)后，代码填充错误。  
</style>

开发环境	版本号	项目创建方式
Windows 10家庭中文版	22H2	-
操作系统内部版本	19045.3693	-

h691938207 1楼•10 天前

HBuilderX 3.99.2023121601-alpha 已修复。

sinazl 2楼•10 天前

非常抱歉给您带来的不便, 我们这边无法复现, 请留下您的联系方式或添加我的QQ: 552455601, 详聊

bupafengyu 3楼•10 天前

在使用 UniApp 开发时，如果你遇到 style 代码提示填充错误的问题，可能是由于以下原因导致的。以下是一些常见的解决方法：

1. 检查代码格式

确保 style 部分的代码格式正确。UniApp 支持多种样式写法，包括：

内联样式：<view style="color: red;">
标签样式：<style> .class { color: red; } </style>
外部样式文件：@import 'path/to/style.css';

如果格式不正确，可能会导致代码提示错误。

2. 检查样式作用域

UniApp 中，<style> 标签默认是全局作用域。如果你使用了 scoped 属性（如 <style scoped>），样式会限定在当前组件内。确保你理解作用域的影响，避免样式冲突或失效。

3. 检查样式兼容性

UniApp 支持多端开发（H5、小程序、App 等），不同平台对样式的支持可能不同。例如：

某些 CSS 属性在小程序中不支持。
某些单位（如 rpx）是 UniApp 特有的，需要正确使用。

确保你使用的样式在目标平台上兼容。

4. 检查 IDE 配置

如果你使用的是 HBuilderX 或其他 IDE，可能是代码提示功能未正确配置或存在 bug。可以尝试以下方法：

更新 IDE 到最新版本。
检查插件是否安装完整。
重启 IDE 或清除缓存。

5. 检查样式优先级

如果样式未生效，可能是优先级问题。UniApp 中样式的优先级规则与标准 CSS 一致，确保你理解 !important、内联样式、类选择器等的优先级。

6. 检查样式文件路径

如果你使用了外部样式文件，确保路径正确。例如：

<style>
@import '/common/style.css';
</style>

如果路径错误，样式文件将无法加载。

7. 检查 UniApp 版本

某些样式问题可能是 UniApp 版本 bug 导致的。可以尝试更新 UniApp 到最新版本，或者查看官方文档和社区是否有相关问题的解决方案。

8. 调试样式

使用浏览器的开发者工具（如 Chrome DevTools）或小程序开发者工具，检查样式是否被正确应用。如果样式被覆盖或未生效，可以通过工具定位问题。

示例代码

以下是一个简单的 UniApp 样式示例：

<template>
  <view class="container">
    <text class="text">Hello UniApp</text>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  color: red;
  font-size: 20px;
}
</style>