uni-app 【已解决】HX3.4.14 CSS自定义代码块在stylus、less下失效 原生CSS没问题

uni-app 【已解决】HX3.4.14 CSS自定义代码块在stylus、less下失效 原生CSS没问题

信息类别 信息内容
产品分类 HbuilderX
操作系统 Windows
版本号 win11
HBuilderX 3.4.14

操作步骤：

  • 自定义代码块后，在stylus或者less下编写CSS 无提示

预期结果：

  • 无提示

实际结果：

  • 有提示

bug描述：

  • CSS自定义代码块在stylus下失效

如图

添加一个gif

gif如图


更多关于uni-app 【已解决】HX3.4.14 CSS自定义代码块在stylus、less下失效 原生CSS没问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

感谢反馈，我们排查一下。

更多关于uni-app 【已解决】HX3.4.14 CSS自定义代码块在stylus、less下失效 原生CSS没问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


哥们儿 有结果吗

这… 最新版本还是不行

vue下的style中的代码块是根据lang来的, 你设置了stylus, 就要自定义stylus的代码块

在版本更新前 3.3.13版本下 代码块没有问题，后面的都不行了

老铁 新版的转到定义貌似失效了 alt+左键 以及alt+d都没效果

回复 秋凡: 3.3.13版本之后对自定义代码块的逻辑做了修改, 属于正常现象

回复 秋凡: 具体是什么情况? 方便的话, 加我QQ: 552455601, 详聊

在 uni-app 中，使用 HX3.4.14 版本时，可能会遇到在 stylus 或 less 中自定义 CSS 代码块失效的问题，而在原生 CSS 中却可以正常工作。这个问题通常与预处理器（如 stylus 或 less）的解析方式或 HBuilderX 的版本兼容性有关。

解决方案

  1. 检查语法：

    • 确保在 stylus 或 less 中的语法是正确的。例如，stylus 和 less 的语法与原生 CSS 有所不同，特别是在嵌套规则和变量使用上。

  2. 检查 HBuilderX 版本：

    • 确保你使用的是最新版本的 HBuilderX。旧版本可能存在一些兼容性问题，更新到最新版本可能会解决这个问题。

  3. 检查预处理器配置：

    • 确保在 vue.config.js 或 uni-app 的配置文件中正确配置了 stylus 或 less 预处理器。例如：

      module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        // 配置 stylus 选项
      },
      less: {
        // 配置 less 选项
      }
    }
  }
}

  4. 使用原生 CSS：

    • 如果问题依然存在，可以暂时使用原生 CSS 来替代 stylus 或 less，以确保代码能够正常工作。

  5. 检查样式作用域：

    • 确保你的样式作用域是正确的。在 uni-app 中，scoped 样式可能会导致一些问题，尤其是在使用预处理器时。

  6. 检查样式引入方式：

    • 确保样式文件被正确引入。例如，在 vue 文件中，使用 [@import](/user/import) 引入样式文件时，路径和语法要正确。

  7. 查看控制台错误：

    • 打开浏览器的开发者工具，查看控制台是否有任何错误信息，这可能会帮助你定位问题。

示例

假设你在 stylus 中定义了一个自定义的 CSS 代码块：

.my-custom-class
  color: red
  font-size: 16px

确保在 vue 文件中正确引入并使用这个类：

<template>
  <div class="my-custom-class">Hello World</div>
</template>

<style lang="stylus">
[@import](/user/import) './path/to/your/stylus/file.styl'
</style>
回到顶部