mmh_xiaofu
mmh_xiaofu
  • 发布:2021-12-15 12:26
  • 更新:2021-12-15 12:26
  • 阅读:1077

【报Bug】通过@import 引入css 样式 条件编译失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: Alpha

HBuilderX版本号: 3.3.1

手机系统: 全部

手机厂商: 华为

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

小米6, [attach]83259[/attach] ios6

示例代码:
<style lang="scss">  
    @import './common/common.scss';  
    @import './common/layout.scss';  
</style>  

###common.css 部分样式  

/* #ifdef H5 */  
page {  
    font-size: 0;  
}  
/* #endif */  
/* #ifndef APP-PLUS-NVUE */  
::-webkit-scrollbar {  
    width: 0;  
    height: 0;  
    color: transparent;  
}  
.status-bar {  
    height: var(--status-bar-height);  
}  
.status-bar-header-seat {height: calc(var(--status-bar-height) + 44px)}  
.safe-bottom-seat {  
    height: constant(safe-area-inset-bottom);  
    height: env(safe-area-inset-bottom);  
}  
/* #endif */  

## 错误提示  

12:18:18.880 nvue中不支持如下css。如全局或公共样式受影响,建议将告警样式写在ifndef APP-PLUS-NVUE的条件编译中,详情如下:  
12:18:18.880 ‌ERROR: Selector `::-webkit-scrollbar` is not supported. Weex only support classname selector at App.vue:33‌  
12:18:18.910 ‌ERROR: property value `var(--status-bar-height)` is not supported for `height` (only number and pixel values are supported) at App.vue:55‌  
12:18:18.920 ‌ERROR: property value `calc(var(--status-bar-height) + 44px)` is not supported for `height` (only number and pixel values are supported) at App.vue:58‌  
12:18:18.920 ‌ERROR: property value `constant(safe-area-inset-bottom)` is not supported for `height` (only number and pixel values are supported) at App.vue:61‌  
12:18:18.930 ‌ERROR: property value `env(safe-area-inset-bottom)` is not supported for `height` (only number and pixel values are supported) at App.vue:62‌  

操作步骤:
<style lang="scss">  
    @import './common/common.scss';  
    @import './common/layout.scss';  
</style>  

###common.css 部分样式  

/* #ifdef H5 */  
page {  
    font-size: 0;  
}  
/* #endif */  
/* #ifndef APP-PLUS-NVUE */  
::-webkit-scrollbar {  
    width: 0;  
    height: 0;  
    color: transparent;  
}  
.status-bar {  
    height: var(--status-bar-height);  
}  
.status-bar-header-seat {height: calc(var(--status-bar-height) + 44px)}  
.safe-bottom-seat {  
    height: constant(safe-area-inset-bottom);  
    height: env(safe-area-inset-bottom);  
}  
/* #endif */  

## 错误提示  

12:18:18.880 nvue中不支持如下css。如全局或公共样式受影响,建议将告警样式写在ifndef APP-PLUS-NVUE的条件编译中,详情如下:  
12:18:18.880 ‌ERROR: Selector `::-webkit-scrollbar` is not supported. Weex only support classname selector at App.vue:33‌  
12:18:18.910 ‌ERROR: property value `var(--status-bar-height)` is not supported for `height` (only number and pixel values are supported) at App.vue:55‌  
12:18:18.920 ‌ERROR: property value `calc(var(--status-bar-height) + 44px)` is not supported for `height` (only number and pixel values are supported) at App.vue:58‌  
12:18:18.920 ‌ERROR: property value `constant(safe-area-inset-bottom)` is not supported for `height` (only number and pixel values are supported) at App.vue:61‌  
12:18:18.930 ‌ERROR: property value `env(safe-area-inset-bottom)` is not supported for `height` (only number and pixel values are supported) at App.vue:62‌  

预期结果:

通过 @import 引入样式后 条件编辑生效

实际结果:
12:18:18.880 nvue中不支持如下css。如全局或公共样式受影响,建议将告警样式写在ifndef APP-PLUS-NVUE的条件编译中,详情如下:  
12:18:18.880 ‌ERROR: Selector `::-webkit-scrollbar` is not supported. Weex only support classname selector at App.vue:33‌  
12:18:18.910 ‌ERROR: property value `var(--status-bar-height)` is not supported for `height` (only number and pixel values are supported) at App.vue:55‌  
12:18:18.920 ‌ERROR: property value `calc(var(--status-bar-height) + 44px)` is not supported for `height` (only number and pixel values are supported) at App.vue:58‌  
12:18:18.920 ‌ERROR: property value `constant(safe-area-inset-bottom)` is not supported for `height` (only number and pixel values are supported) at App.vue:61‌  
12:18:18.930 ‌ERROR: property value `env(safe-area-inset-bottom)` is not supported for `height` (only number and pixel values are supported) at App.vue:62‌  

bug描述:

通过 @import 引入css 样式 在css中的条件编辑失效。

2021-12-15 12:26 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复