How uniapp defines global styles

As the development of mobile applications becomes more and more popular, many developers choose to use uniapp for cross-platform development. How to define global styles in uniapp? This article will introduce how to define the global style of uniapp.

1. The role of global styles

In uniapp, we often need to define some global styles, such as page background color, font style, common colors, etc. If each page defines these styles separately, it will undoubtedly increase our development workload. Therefore, defining global universal styles can greatly simplify the development process and improve development efficiency.

2. Define global styles

Defining global styles in uniapp can be achieved through the app.vue file. First, define the global style class in the app.vue file, for example:

<template>
  <div class="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
  /*定义全局的样式*/
  .global {
    font-family: 'Helvetica Neue',Helvetica,sans-serif;
    font-size: 16px;
    color: #333;
  }
</style>

Third, use global styles

After defining the global styles, we can use these directly in each page style. For example, we can introduce the defined global style into the page and use it:

<template>
  <div class="global">
    <p>这是一个页面</p>
  </div>
</template>

<style lang="scss">
  /*引入定义的全局样式*/
  @import "@/App.vue";
  
  /*在页面中使用全局样式*/
  p {
    margin: 10px 0;
  }
</style>

In this way, the defined global style will be applied to the current page.

4. Summary

Through the above steps, we can easily define and use global styles. When developing uniapp applications, use global common styles as much as possible to reduce the amount of code and improve development efficiency.

The above is the detailed content of How uniapp defines global styles. For more information, please follow other related articles on the PHP Chinese website!