Vue：仅在创建组件时才导入 SCSS

Question

我正在尝试仅为我的管理组件导入 Material SCSS。

这在本地开发时效果很好，但是一旦我将网站部署到 Firebase 托管，材料样式就会应用于我的所有 SPA，包括客户端。

我试过了：

// Importing the SCSS files within the Admin component ID
  #admin {
    @import "../../../../node_modules/vue-material/dist/vue-material.min.css";
    @import "../../../../node_modules/vue-material/dist/theme/default.css";
  }

然后

// Importing the SCSS files within the Admin component CLASS
  .admin {
    @import "../../../../node_modules/vue-material/dist/vue-material.min.css";
    @import "../../../../node_modules/vue-material/dist/theme/default.css";
  }

然后我在组件本身中尝试了它

// Importing the SCSS files within the Admin components beforeCreate lifecycle hook
  beforeCreate() {
    // Ensuring style files only get loaded if this component is used
    import("vue-material/dist/vue-material.min.css")
    import("vue-material/dist/theme/default.css")
  },

最后：

// Importing the SCSS files within the Admin components, which is only rendered if in the
// main App component its v-if is true.
<script>
.
.
.
import "vue-material/dist/vue-material.min.css"
import "vue-material/dist/theme/default.css"
.
.

我认为这可能是因为浏览器中的一些缓存，但是我已经尝试重新加载 Chrome 并尝试了多个不同的浏览器，但问题仍然存在。

此外，我尝试注释掉 CSS 导入并重新部署，这确实有效。所以问题出在Admin 组件中，它是如何导入和加载样式的。

另外奇怪的是，我在组件的created 钩子中添加了一个控制台日志，只是为了检查它是否被创建，即使它不应该创建，但它没有。所以我不知道样式是如何进入的。我认为它们会与构建过程中的所有其他部分混在一起。

我确信有一个简单的解决方案，但我已经用完了。

Answer 1

经过反复试验，我发现唯一可行的方法是在组件获得created 后将样式从CDN 动态导入HEAD 元素。像这样：

created() {
  this.inject_material_fonts_and_icons_into_header()
},
.
.
.
methods: {
inject_material_styles_into_header() {
  [
    "https://unpkg.com/vue-material@beta/dist/theme/default.css",
    "https://unpkg.com/vue-material@beta/dist/vue-material.min.css",
    "https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"
  ].forEach(route => {
    const link_el = document.createElement("link")

    link_el.setAttribute("rel", "stylesheet")
    link_el.setAttribute("href", route)

    document.head.appendChild(link_el);
  })
}
}

如果有人有更好的建议，请不要犹豫添加它们。我对依赖 CDN 不满意，但在这一点上，我不能在这个问题上花更多时间。