React - Sass 移动端使用 2 3倍图

• 安装 node-sass

npm i node-sass -D

• 项目目录结构

• mixins.scss 文件

// mixins.scss
@mixin bg-image ($url) {
  background-image: url($url + '@2x.png');
  background-size: 100%;
  background-repeat: no-repeat;
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + '@3x.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

• 引入mixins.scss，图片文件加上@2x.png / @3x.png。如果图片文件与当前页面 .scss 文件同级，需要在引入图片路径前加上 ~，避免出现引用路径出错

@import "../../common/style/mixins.scss";

.baseFooter {
  @include bg-image("~./icon_sy_sy");
}