我的svg無法更改樣式fill，在控制臺都無法更改，這是為什么？

目錄層級

webpack配置代碼

  module: {
    rules: [
      {
        test: /\.svg$/,
        include: [resolve('/src/assets/svg')],
        loader: 'svg-sprite-loader',
        options:{
          name: '[name]'
        }
      }
    ]
  }

vue代碼如下

<template>
  <div class="community">
    <svg>
      <use class='svgStyle' xlink:href="#boy" />
    </svg>
  </div>
</template>
<script>
import '../../assets/svg/boy.svg'
export default {
  data() {
    return {
      msg: '社區(qū)'
    }
  }
  .......
}
</script>

不知道是不是這個#shadow-root后面括號中closed的原因，這個要怎么改？

即使我在控制臺中的elements中都無法更改樣式fill

這里查看更改的情況，顯示是更改了 但是始終是沒有效果的