Vue:只有在创建组件时才导入SCSS

Question

我试图进口的材料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导入和重新部署，这确实有效。所以问题就在组件中，它是如何导入和加载样式的.。

另外，奇怪的是，我在组件的created钩子中添加了控制台日志，只是为了检查是否创建了它，即使它不应该创建，也不应该创建。所以我不知道这些款式是怎么进来的。我认为它们与构建过程中的其他部分混为一谈。

我相信有一个简单的解决办法，但我已经用完了我的。

Answer 1

经过更多的尝试和错误之后，我发现唯一有效的方法是在组件获得HEAD之后，将样式从CDN动态导入到created元素。就像这样：

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，但在这一点上，我不能花更多的时间在这个问题上。