小程序网络资源统一管理，通过css变量使用网络资源

存在问题：

小程序开发时，为了减少小程序代码包的体积，一般会将 static 目录下的静态资源放在服务端，通过网络资源形式引入。

通过 image 标签的 src 属性引入使用

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

当使用的网络资源比较多，后期需要替换资源的路径，工作量就会比较大。

解决方案：

将网络资源通过css变量形式定义，放在一个文件中统一管理。需要使用时，通过背景图片形式引入。

示例：

小程序开发框架为uni-app，以oss服务器为例

1、静态资源存放到服务器

2、资源路径引入

static 目录下新建 oss.scss 文件

将资源的网络路径以 scss变量形式定义

以下地址仅为示例，并非真实存在

/* 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';

在 scss 中，可以使用 $ 符号定义变量，定义一个变量后，可以在样式代码的任何地方使用该变量。

在使用变量时，变量名称前必须要加上 $ 符号。

3、全局引入 oss.scss

在根目录 uni.scss 文件中引入 oss.scss

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

4、变量使用

当需要展示图片时：

创建 view 标签，css 中通过背景图片形式使用网络资源

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

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

当需要设置字体样式时：

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