我可以在没有Vue Loader的情况下包含scoped css吗？

Question

对于放入Vue的项目，是否正在使用组件可用的样式或类似内容？

Vue.component('vue-sup', {
    template: '<div>Sup</div>',
    style: '* { color: blue; }'
})    

我尝试在模板中添加样式，如：

<div>
    <style> 
        .here{} 
    </style>
    <div>Sup</div>
</div> 

由于模板解析器检测到带有副作用的标签

，因此无效

Answer 1

Vue的scoped css实现完全是vue-loader的一个特性，因此只适用于编译。 Scoped css暂时首次登上Html 5，但看到几乎没有采用，据我所知，完全被删除。有人期待＆＃34; Shadow DOM＆＃34;可以广泛支持并且可以用于添加范围的CSS，但是也没有采用。

所以在这一点上你可以明显地向父容器添加唯一的类或id并以这种方式调整你的css范围，但可以理解的不是你要求的东西，也不总是实用的。

最好的选择是pollyfill。有几种可用。这是一个Sam Thorogood和另一个Thomas Park，但如果你快速搜索，你可能会发现更多。

Answer 2

我遇到了同样的问题，并且能够在Vue模板中插入样式 通过创建将在DOM上动态插入<style>标签的组件。像@skribe所说的那样，这可能是不切实际的，但是它允许我在不使用.vue扩展名的情况下将CSS与JS分开。

您可以看看this