vue項(xiàng)目中同時(shí)使用postcss的postcss-write-svg和less導(dǎo)致不能正常編譯？

vue項(xiàng)目，webpack打包。
已配置好loader，代碼如下

{
        test: /\.less$/,
        use: [
          {
          loader: 'style-loader',
          options: {} // style-loader options
        },{
          loader: 'css-loader',
          options: {
            importLoaders: 2 // css-loader options
          }
        },{
          loader: 'postcss-loader',
          options: {
            plugins: function () {
              return [
                require('postcss-write-svg')
              ];
            }
          }
        },{
          loader: 'less-loader',
            options: {}
        }
        ]
      },

在vue頁(yè)面中寫樣式，代碼如下：

<style scoped lang="less">
  @svg 1px-border {
    height: 2px;
    @rect {
      fill: var(--color, black);
      width: 100%;
      height: 50%;
    }
  }
  .ex-font{
    font-size:18px;
  }
  .ex-border{
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
  }
</style>

編譯后結(jié)果如圖：

若在style標(biāo)簽內(nèi)去掉'lang="less"'，則postcss-write-svg可正常編譯：

求助如何能同時(shí)使用？