如何实现vue 切换主题（换肤）功能

问题：1、每次点击的时候，控制台报这个错误——资源被解释为 样式表,但使用 MIME 类型 text/html 进行了传输:
2、页面加载完毕后报这两个错误 ——资源被解释为 样式表，但使用 MIME 类型 text/plain 进行了传输、
资源被解释为 样式表,但使用 MIME 类型 text/html 进行了传输:
1\在HTML里引入了link样式如下：

    <link type="text/css" rel="stylesheet" id="style" href="/static/css">

2、加一个点击事件如下：

<a @click="change(type)">
      <img class="pf-img" src="../../assets/pf.png" alt="" />
</a>
引入样式---<style lang="scss" scoped>不引入的话页面没有样式
  @import "./public/static/css/index.scss";
   @import "./public/static/css/style.scss";
</style>
return {  type: 1,}
methods: {
change(type) {
        if (this.type == 1) {
          document.getElementById('style').setAttribute("href", "./static/css1");
          localStorage.setItem("style", "./static/css1");
          this.type =!this.type
          console.log('改变为白色主题')
        }else{
          document.getElementById('style').setAttribute("href", "./static/css");
          localStorage.setItem("style", "./static/css");
          this.type =!this.type
          console.log('改变为深色主题')
        }
      },//change——end
}//methods——end

附上css目录——

img