如何从网站的其余部分确定内部 Vue 应用程序 css 的范围？答案

【问题标题】：How to scope internal Vue application css from rest of the website?如何从网站的其余部分确定内部 Vue 应用程序 css 的范围？
【发布时间】：2017-10-16 19:05:32
【问题描述】：

我需要创建一个“插件”，其中包含将显示在许多不同供应商网站上的用户界面。这是一个与 CMS 无关的插件。出于 SEO 的原因，我不能使用 iframe。我需要将插件的 css（可能还有 js）与网站的其余部分隔离，并阻止网站的其余 css 访问此插件。我该怎么做？

更新：

好的，我问了一个对我的设置/技术来说有点过于具体的问题。问题应该是：如何将 html 元素与其他文档样式隔离开来？这是answered here;

新问题：如何确定 Vue CSS 的范围，使其不会向上传播，而是传播到子组件？

例如，我有包含 bootstrap.scss 的主要 Vue 组件，我需要将其应用于所有子组件，但我不希望它泄漏到主网站中。将scoped 添加到样式会阻止向上泄漏，但我希望它也适用于子类。

【问题讨论】：

我认为您可以在.vue 文件中使用<style></style> 标签，这使得该样式仅适用于该文件的<template></template> 标签中包含的内容
我还需要使用引导程序，但我想要它自己的单独版本。我也不希望网站的其余 css 泄漏到 Vue 应用程序中。这甚至可能吗？

标签： javascript html css vue.js

【解决方案1】：

好的，我想通了。

真的很简单，结合this answer 防止父-> 子继承。我将所有 Vue css 限定在 #app { /*styles*/ } 中，包括引导导入。例如

<style type="text/scss" lang="scss">
    #app {
        @import '../node_modules/bootstrap/scss/bootstrap';

        // rest of vue global styles go here.
        // child components may use scoped
    }
</style>

注意：我没有在根 vue 组件上使用 scoped 属性。

【讨论】：

这将包括 all 的引导程序的 css - 你需要所有的吗？文件大小/加载时间不是您关心的问题吗？
不，不是。这些是流量不大的小型网站。
谢谢你，我一直在使用 Less，但这不起作用，更改为 scss 对我有用

【解决方案2】：

我想这就是你要找的。在您的 .vue 文件中，您可以向模板添加样式标签，然后 Vue 将创建仅适用于您的应用程序的 Shadow DOM 样式。在最终产品中，样式通过 data-v 属性呈现，以防止类名冲突。

https://vue-loader.vuejs.org/en/features/scoped-css.html

（复制自我的 reddit 答案） https://www.reddit.com/r/vuejs/comments/76ss46/how_to_isolate_a_vue_application_from_the_rest_of/?st=J8UMA1JQ&sh=c3ebf5b1

【讨论】：

嘿，我目前正在使用该属性，但我有一个新问题。请查看我更新的问题。