vue项目中同时使用postcss的postcss-write-svg和less导致不能正常编译？

Question

vue项目，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页面中写样式，代码如下：

<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>

编译后结果如图：

若在style标签内去掉'lang="less"'，则postcss-write-svg可正常编译：

求助如何能同时使用？

补充：旧项目用的是Less 2.7.3版本，写法如图

较高版本Less 暂未试

Answer 1

你试试把 postcss-load 放在最后面？ 加载器是倒叙 注入的。

Answer 2

请问是哪里错误导致的？我也遇到了这种情况

Answer 3

同问 怎么 解决

Answer 4

同问这个问题，大佬解决了吗