我可以在打印 HTML 页面时使用作用域 CSS 吗 (使用 Laravel 和 Vue.js)

Should I put the scoped CSS in my master file, or should I change the print function in order to accomodate components' scoped CSS? In the second case, how should I change the JS function?

我将Laravel 5与许多Vue组件一起使用.在其中一个例子中，我有以下范围的CSS

<style scoped>
    td.not-purchased{
        background-color: darkgrey;
    }
    td.not-assigned-here{
        background-color: lightgreen;
    }
    td .checkbox{
        margin-top: 0;
        margin-bottom: 0;
        display: inline-block;
    }

    table th:nth-child(n+3),
    table td:nth-child(n+3){
        width: 50px;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
</style>

打印生成的内容时，该函数会在新页面中打开内容，并将外部CSS复制到原始文档的头部.

$(document).on('click', '.glyphicon[data-printselector]', function(){
        if($(this).data('printselector') != ''){
            // Print in new window
            let printHtml = $($(this).data('printselector')).clone(),
                printWindow = window.open(),
                waitTimeout;

            $(printWindow.document.body).append($('<div />', {class: 'container'}).append(printHtml));


            $.each($('link'), function() {
                $(printWindow.document.head).append($(this).clone());

                clearTimeout(waitTimeout);
                waitTimeout = setTimeout(function(){
                    // Here we ensure that CSS is loaded properly
                    printWindow.print();
                    printWindow.close();
                }, window.changeFunctionTimeoutLong);
            });

        }
        else
            window.print();
    });

我知道这可以通过将作用域CSS直接放入我网站的主CSS中来实现，但我相信这违背了使用作用域CSS的全部意义.