postcss-write-svg在Vue中应用实现1px边框

创建项目部在赘述，配置vw移动端适配请查看Vue中vw配置

在项目资源文件中新建svg.scss文件

@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}

@svg 1px-border2 {
    width: 4px;
    height: 4px;
    @rect {
        fill: transparent; 
        width: 100%; 
        height: 100%; 
        stroke-width: 25%; 
        stroke: var(--color, black);
    }
}

在需要使用的组件中引入，如果配置了eslint注意引号问题可能导致报错

<style scoped lang="scss">
@import "./src/assets/sass/svg.scss";
.hello {
  width: 100%;
  height: 100%;
  h1 {
    width: 375px;
    height: 200px;
    background: #303133;
  }
  p {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    margin-top: 50px;
    background: pink;
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #000)) 2 2 stretch;
  }
  div {
    width: 200px;
    height: 200px;
    margin: 50px auto 0;
    border: 1px solid transparent;
    border-image: svg(1px-border2 param(--color blue)) 1 stretch;
  }
}

效果如下