vue.js 会多打印出css样式的字符串问题 分析原因及解决

ps：网上找了半天，搜索出来的都是解决css样式打印失效问题的，没有我遇到的这种情况！！

问题

如图 打印预览显示 css样式的字符串也打印出来了

分析原因

既然是打印多出来了css，我就从css样式查看。
我的css样式是less格式 并通过外部使用@import引入进去的
外部的less样式如下：

// demo: 组件用法
/* <template>
  <div class=" NoRouterPopup">
    <div class="no-router-content">
        sd
    </div>
    <div class="no-router-footer">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-check"
        @click="confirmClick"
        >确定</el-button
      >
      <el-button size="mini" icon="el-icon-close" @click="cancelClick"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
   
    };
  },
  methods: {
    confirmClick() {},
    cancelClick() {
      this.$emit("closeSelf");
    },
  },
};
</script>
<style lang="less" scoped>
  @import "~@/assets/css/NoRouterPopup.less";

</style> */


.NoRouterPopup {
    
    
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  .no-router-content {
    
    
    flex-grow: 1;
    height: 100%;
    width: 100%;
    padding: 5px;
    overflow: auto;
    // text-align: left;
  }

  .no-router-footer {
    
    
    width: 100%;
    min-height: 40px;
    height: 40px;
    background: white;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10px;
  }
}

组件引入less

<style lang="less" scoped>
@import "~@/assets/css/NoRouterPopup.less";
</style>

我把@import的外部引入注释，发现还是打印出css字符串，这个让我不解！因为虽然别的地方也引入了该less样式。但不是全局引入，打开应该不会被使用。
经过一下午的尝试，最终发现问题还是出现在外部的less样式文件中！！
我把less 中的注释删除，发现居然不打印css字符串了！！
外部less如下：
把注释都删除了

.NoRouterPopup {
    
    
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  .no-router-content {
    
    
    flex-grow: 1;
    height: 100%;
    width: 100%;
    padding: 5px;
    overflow: auto;
  }

  .no-router-footer {
    
    
    width: 100%;
    min-height: 40px;
    height: 40px;
    background: white;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10px;
  }
}

效果（打印正常）

然后我尝试着吧多行注释改为单行注释

// <template>
//   <div class=" NoRouterPopup">
//     <div class="no-router-content">
//         sd
//     </div>
//     <div class="no-router-footer">
//       <el-button
//         type="primary"
//         size="mini"
//         icon="el-icon-check"
//         @click="confirmClick"
//         >确定</el-button
//       >
//       <el-button size="mini" icon="el-icon-close" @click="cancelClick"
//         >取消</el-button
//       >
//     </div>
//   </div>
// </template>
// <script>
// export default {
    
    
//   data() {
    
    
//     return {
    
    
   
//     };
//   },
//   methods: {
    
    
//     confirmClick() {},
//     cancelClick() {
    
    
//       this.$emit("closeSelf");
//     },
//   },
// };
// </script>
// <style lang="less" scoped>
//   @import "~@/assets/css/NoRouterPopup.less";

// </style>

结果 css样式字符串也不会打印出来
我逐个排查，发现<style ></style>元素使用/**/多行注释会打印出css样式字符串,使用//单行注释则不会打印出来！！
然后我 直接在组件内部尝试，发现<style></style>无论使用/**/多行注释还是//单行注释都会报错！！(ノ_；


最终得出结论！！导致打印出现css样式字符串是因为注释中存在<style ></style>字符串。

解决

把注释中带有<style ></style>的字符串删除！