我可以在没有 Vue Loader 的情况下包含作用域 css 吗？答案

【问题标题】：Can I include scoped css without Vue Loader?我可以在没有 Vue Loader 的情况下包含作用域 css 吗？
【发布时间】：2018-03-20 08:57:57
【问题描述】：

对于一个使用 Vue 的项目，组件是否可以使用样式或类似的东西？

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

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

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

这不起作用，因为模板解析器检测到带有副作用的标签

【问题讨论】：

【解决方案1】：

Vue 的 scoped css 实现完全是 vue-loader 的一个特性，因此只适用于编译。 Scoped css 暂时在 Html 5 中首次亮相，但几乎没有被采用，据我所知完全被放弃了。预计“Shadow DOM”可能会得到广泛支持，并可用于添加作用域 css，但目前还没有采用。

因此，此时您显然可以将唯一的类或 id 添加到父容器并以这种方式限定您的 css，但可以理解的是，这不是您所要求的，也不总是实用的。

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

【讨论】：

非常好的解决方案。唯一的问题是，当我在模板中包含 <script> 标记时，我会收到一条警告，指出“Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.”
这不是一个真正有效的解决方案，但我编辑了 Vue 的源代码以不查看 <style> 标签。有没有办法可以把它变成一个插件？有问题的函数是isForbiddenTag(el)
不确定，但您是否尝试在您的 app.js (vue.js) 文件之后调用函数 Vue.config.ignoredElements？ vuejs.org/v2/api/#ignoredElements

【解决方案2】：

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

你可以看看this

【讨论】：