Mini-program unified management of network resources, using network resources through css variables

There is a problem:

When developing a small program, in order to reduce the size of the small program code package, the static resources under the static directory are generally placed on the server and imported through the form of network resources.

Import and use through the src attribute of the image tag

<image class="logo" src="https://test.png"></image>

When many network resources are used, the path of resources needs to be replaced later, and the workload will be relatively large.

solution:

Define network resources in the form of css variables and put them in one file for unified management. When it needs to be used, it is imported in the form of a background image.

Example:

The applet development framework is uni-app, taking oss server as an example

1. Static resources are stored on the server

2. Introduction of resource path

Create a new oss.scss file in the static directory

Define the network path of the resource as a scss variable

The following addresses are examples only and do not exist

/* logo */
$oss-logo: 'https://test1.png';
$oss-logo-circle: 'https://test2.png';
$oss-logo-circle2: 'https://test3.png';

/* font */
$oss-font-barlow: 'https://Barlow-BoldItalic.ttf';

In scss, variables can be defined using the $ symbol, and once a variable is defined, it can be used anywhere in the style code.

When using variables, the variable name must be preceded by a $ symbol.

3. Import oss.scss globally

Introduce oss.scss in the uni.scss file in the root directory

@import "@/static/oss.scss";

4. Use of variables

When displaying pictures:

Create a view tag, and use network resources in the form of background images in css

<view class="logo"></view>

.logo {
    
    
  width: 86rpx;
  height: 86rpx;
  background: url($oss-logo-circle2) no-repeat top left;
  background-size: 86rpx;
}

When you need to set the font style:

@font-face {
    
    
  font-family: Barlow-BoldItalic;
  src: url($oss-font-barlow);
}