postcss-add-background-size v1.3.1

postcss-add-background-size

功能

识别 css 样式中 url（）加载的本地图片,为元素自动添加 width 和 height。

说明

1、支持 px、vh、vw、rem。

2、width、height、background-size 可在当前类名下重写。

3、同名文件变更需重启服务。

4、请根据具体的插件顺序，选择对应的编译单位！！

参数

插件参数: | 属性 |值类型 | 说明|必选| | --- | --- |--- |--- | | width | object | 见 options，不设默认 px|否| | height | object | 见 options，不设默认 px|否| | exclude | array | 排除图片|否|

options： | 属性 |值类型 | 说明|必选| | --- | --- |--- |--- | | unit | string | 单位，可选 px、vw、vh、rem|是| | value | number | 基准值，不设默认 0|是|

例子

./src/testProject/scss/test.scss

./src/testProject/img/button1.png (100*60)

./src/testProject/img/button2.png (100*60)

.button1 {
  background: url(../img/button1.png);
  color: black;
}
.button2 {
  background: url(../img/button2.png);
  color: black;
}

案例 1

webpack.config.js:

{
  loader: "postcss-loader",
  options: {
  plugins: () => [require("postcss-add-background-size")()],
  },
}

最终效果：

.button1 {
  background: url(../img/button1.png);
  width: 100px;
  height: 60px;
  background-size: contain;
  color: black;
}
.button2 {
  background: url(../img/button2.png);
  width: 100px;
  height: 60px;
  background-size: contain;
  color: black;
}

案例 2

webpack.config.js:

{
  loader: "postcss-loader",
  options: {
  plugins: () => [require("postcss-add-background-size")({
    width:{
      unit:"vw",
      value:1920
    },
    height:{
      unit:"vw",
      value:1920
    }
   })],
  },
}

最终效果：

.button1 {
  background: url(../img/button1.png);
  width: 5.2vw;
  height: 3.12vw;
  background-size: contain;
  color: black;
}
.button2 {
  background: url(../img/button2.png);
  width: 5.2vw;
  height: 3.12vw;
  background-size: contain;
  color: black;
}

案例 4

webpack.config.js:

{
  loader: "postcss-loader",
  options: {
  plugins: () => [require("postcss-add-background-size")({
    width:{
      unit:"rem",
      value:75
    },
    height:{
      unit:"rem",
      value:75
    }
   })],
  },
}

最终效果：

.button1 {
  background: url(../img/button1.png);
  width: 1.33rem;
  height: 0.8rem;
  background-size: contain;
  color: black;
}
.button2 {
  background: url(../img/button2.png);
  width: 1.33rem;
  height: 0.8rem;
  background-size: contain;
  color: black;
}

案例 4

webpack.config.js:

{
  loader: "postcss-loader",
  options: {
  plugins: () => [require("postcss-add-background-size")({
    exclude:["2"]
   })],
  },
}

最终效果：

.button1 {
  background: url(../img/button1.png);
  width: 100px;
  height: 60px;
  background-size: contain;
  color: black;
}
.button2 {
  background: url(../img/button2.png);
  color: black;
}

案例 5

若最终计算结果有误，可手动重写

scss 文件

.button1 {
  background: url(../img/button1.png);
  width: 120px;
}

最终效果：

.button1 {
  background: url(../img/button1.png);
  width: 100px; // 不生效
  height: 60px;
  background-size: contain;
  width: 120px; // 生效
}

有问题可联系作者https://blog.csdn.net/jiayaner/article/details/117370577