webpack - Vue2 中 scoped 样式打包后选择器缺少自定义属性原因？

Question

在vue2项目中一个公共样式通过style+scoped引入后，为什么webpack打包后生成的css文件中样式选择器有存在没有自定义属性的呢

因为vue-print-nb依赖打印预览时会加载所有style样式，因为上述问题样式选择器中没有自定义属性的样式污染了打印预览的样式

Answer 1

可以参考这篇文章
vue打包后导致css属性值丢失的问题如何处理

另外，如果你的项目中全局样式较多且复杂，使用独立的打印样式表可能是最好的选择，因为它可以完全隔离打印样式，避免任何污染。
创建一个专门用于打印的CSS文件，并在调用打印功能时指定该样式表。例如：

this.$printnb({
  stylesheet: './print.css'
});

Answer 2

这样的话，你可以试试把所有东西直接写入组件的<style scoped>中，或者使用Vue的深度选择器（/deep/或::v-deep）
并且对于需要全局应用的css，单独创建一个全局文件，在项目入口文件中引入。
在全局css中用@media print {}控制打印显示效果避免样式干扰。