SASS在Weex开发环境的使用中怎么导入.scss文件才能起作用?
我已经根据简书上的https://www.jianshu.com/p/580... 安装配置步骤及使用方法操作一遍,没有出错,导入.scss文件时只是将原来写好的css文件改名为.scss文件,相关代码如下
.we文件中style标签中的代码
> <style lang="sass">
@import "./coupon-mall.scss";
</style>
>
新建的.scss文件中的全部代码
> .main_home {
background-color: #FBF9FE;
}
.title_main_out {
flex-direction: row;
justify-content: space-between;
text-align: center;
background-color: #ff6700;
align-items: center;
}
.title_back_out {
width: 240px;
padding: 28px;
flex-direction: row;
align-items: center;
}
.title_img_mine {
justify-content: flex-end;
width: 240px;
padding: 28px;
flex-direction: row;
align-items: center;
}
.img_back {
width: 38px;
height: 38px;
}
.merchant_back_text {
color: white;
font-size: 35px;
}
.main_header_title {
color: white;
font-size: 40px;
}
.title_mycoupon_text {
color: white;
font-size: 30px;
}
.line_grey {
width: 750px;
height: 2px;
background-color: #eeeeef;
}
.img_mine {
width: 50px;
height: 50px;
}
.classificarion {
padding-top: 20px;
padding-bottom: 30px;
background-color: white;
}
.row_classificarion {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 70px;
padding-right: 70px;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: white;
}
.item_classificarion {
flex-direction: column;
justify-content: center;
align-items: center;
}
.slider {
flex-direction: row;
width: 750;
height: 400;
}
.slider_pages {
flex-direction: row;
width: 750;
height: 400;
}
.slider_image {
width: 750;
height: 400;
resize: cover;
}
.coupon_slider_search_div {
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: absolute;
top: 20px;
left: 50px;
}
.coupon_slider_location_div {
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-right: 15px;
}
.coupon_slider_location_text {
font-size: 30px;
color: white;
margin-right: 5px;
}
.coupon_slider_location_image {
width: 30px;
height: 30px;
}
.coupon_slider_search_text {
opacity: 0.5;
background-color: white;
width: 500px;
height: 43px;
font-size: 33px;
text-align: center;
color: #aeaeaf;
border-radius: 30px;
}
.item_image {
width: 80px;
height: 80px;
margin-bottom: 10px;
}
.item_text {
font-size: 25px;
}
.refreshOut {
width: 750;
padding: 30;
align-items: center
}
.loadingOut {
flex-direction: row;
width: 750;
padding: 30px;
align-items: center;
justify-content: center;
}
.load_indicator {
width: 40;
height: 40;
color: #454545;
margin-right: 20px
}
.indicator {
color: grey;
margin-bottom: 30px
}
.no_div {
width: 750;
align-items: center;
padding: 30px;
}
.no_text {
color: grey;
font-size: 30px;
}
.no_billmerchant {
align-items: center;
width: 750;
position: fixed;
top: 1000px;
}
.no_billmerchant_img {
width: 200px;
height: 200px;
}
.no_billmerchant_text {
font-size: 32px;
color: #a1a1a1;
}
.coupon_list_cell_image {
width: 750px;
height: 200px;
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
.coupon_list_text_div {
position: absolute;
top: 70;
left: 50;
}
.coupon_list_company_text {
font-size: 30px;
}
.coupon_list_limit_text_div {
margin-top: 17px;
flex-direction: row;
}
.coupon_list_limit_text_1 {
font-size: 20px;
color: #aeaeaf;
}
.coupon_list_limit_text_2 {
font-size: 20px;
color: #88abef;
margin-left: 10px;
}
显示到android手机中后没有效果
请问怎么解决,谢谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我想遇到同样的问题,请问解决了么?