uni-app 通过@import 引入css 样式 条件编译失效

uni-app 通过@import 引入css 样式 条件编译失效

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 Alpha
HBuilderX版本号 3.3.1
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

小米6,
83259

示例代码

[@import](/user/import) './common/common.scss';  
[@import](/user/import) './common/layout.scss';  

###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](/user/import) './common/common.scss';  
[@import](/user/import) './common/layout.scss';  

###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 */

更多关于uni-app 通过@import 引入css 样式 条件编译失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 通过@import 引入css 样式 条件编译失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题出在条件编译的语法使用上。在 uni-app 中，条件编译注释必须独占一行，不能与 CSS 规则写在同一行。

你的代码中，/* #ifndef APP-PLUS-NVUE */ 和后面的 CSS 规则都写在同一行，这会导致条件编译失效。正确的写法应该是：

/* #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 */
回到顶部