Question

我试图仅为我的管理组件导入Material SCSS。

这在本地开发时效果很好，但是一旦我将网站部署到Firebase托管，Material样式就会应用于我的所有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

经过更多的试验和错误之后，我发现可行的唯一方法是，一旦组件获得ID AA TA TL ML PP Date 2001 AAPL 1.0 44 50 NaN NaN 2002 AAPL 3.0 33 51 NaN NaN 2003 AAPL 2.0 22 53 NaN NaN 2004 AAPL 5.0 11 76 NaN NaN 2005 AAPL 2.0 33 44 NaN NaN 2006 AAPL 3.0 22 12 NaN NaN 2001 MSFT 3.5 44 NaN 12 NaN 2002 MSFT 6.7 33 NaN 15 NaN 2003 MSFT 2.3 22 NaN 19 NaN 2004 MSFT 5.5 11 NaN 20 NaN 2005 MSFT 2.2 33 NaN 43 NaN 2006 MSFT 3.2 22 NaN 23 NaN 2001 TSLA 3.3 48 NaN NaN 18 2002 TSLA 6.3 38 NaN NaN 18 2003 TSLA 2.6 28 NaN NaN 18 2004 TSLA 5.3 18 NaN NaN 28 2005 TSLA 2.3 38 NaN NaN 48 2006 TSLA 3.3 28 NaN NaN 28，就将样式从CDN动态导入到HEAD元素中。像这样：

created

如果有人有更好的建议，请随时添加。我对依靠CDN感到不满意，但是在这一点上，我不能在这个问题上花费更多的时间。

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

1 个答案: