在 nuxt.js/vue.js 上每页加载不同的 css

【问题标题】：Loading different css per page on nuxt.js/vue.js在 nuxt.js/vue.js 上每页加载不同的 css
【发布时间】：2021-04-17 00:02:10
【问题描述】：

例如，我对每个模板/页面使用不同的 css

pages/login/step1.vue
  import "~/assets/css/step1.css"


pages/login/step2.vue
  import "~/assets/css/step2.css"

但是每当我从第 1 步转到第 2 步时，第 2 步会从第 1 步继承一些我不需要的东西。

任何帮助表示赞赏！谢谢

【问题讨论】：

【解决方案1】：

我认为更好的方法是放置 scoped 属性，就像你的 css 只为请求的组件加载。

<style scoped></style>

希望这个答案对你有所帮助：D

【讨论】：

我的 css 非常庞大，我决定把它放在 assets/css 中。
@usupyusuke 这意味着您“决定”将其应用于整个应用程序，而不仅仅是当前组件。您无法卸载已加载的 CSS 资源。但是你可以告诉 Vue：调整这个 CSS 的选择器，让它只适用于当前组件。这就是scoped 所做的。
如果我的 css 由 600 ~ 1000 行 css 组成怎么办？这些 css 来自 3rd 方程序..