uniapp中样式的学习及如何使用scss和字体图标

uniapp中样式的学习及如何使用scss和字体图标

uni-app中的样式

• rpx即响应式px,一种根据屏幕自适应动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会比较大。

iphone XR(414*896)它的宽高为(414*414)

所以750rpx就等于它一整屏幕的宽度

<template>
    <div>
        <view>
            <text>样式的学习</text>
        </view>
        <view class="box1"></view>
    </div>
</template>

<script>
    export default{

    }
</script>

<style scoped>
    .box1{
        width: 750rpx;
        height: 750rpx;
        background: linear-gradient(#CAE1FF,#EE0000,#98FB98,#4EEE94,#87CEFF);
    }
</style>

---

• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

外部css样式

view{
    color: red;
}

.vue文件里的:

<template>
    <div>
        <view>
            <text>样式的学习</text>
        </view>
        <view class="box1"></view>
    </div>
</template>

<script>
    export default{

    }
</script>

<style scoped>
    @import url("./a.css");
    .box1{
        width: 750rpx;
        height: 750rpx;
        background: linear-gradient(#CAE1FF,#EE0000,#98FB98,#4EEE94,#87CEFF);
    }
</style>

• 支持基本常用的选择器class、id、element等

• 在uni-app中不能使用*选择器。

• page相当于body节点

• 定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器

• uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点:

  • 字体文件小于40kb,uni-app会自动转化为base64格式;

  • 字体文件大于等于40kb,需要开发者自己转换,否则使用将不生效;

  • 字体文件的引用路径推荐使用以~@开头的绝对路径。

    @font-face{
        font-family: test1-icon;
        src: url('~@/static/iconfont.ttf')
    }
    

• 如何使用scss或less

在uni.scss里面启用的是全局的scss

VsCode里面npm i sass-loader是不行的，你可以采取以下解决办法:

npm i sass-loader@10.1.1 -D

安装10.1.1版本的sass-loader

再安装5.0.0版本的node-sass

npm i node-sass@5.0.0 -D

node-sass需要装Python，Python v3.10.1会报错,控制台执行:

npm install --global --production windows-build-tools