时间戳

首页 > 解决方案 > 如何在 Nuxtjs 中为每个布局包含本地（非全局）样式表文件

css - 如何在 Nuxtjs 中为每个布局包含本地（非全局）样式表文件

问题描述

是否可以将 css 文件导入单独的布局，以便样式仅应用于一个布局而不影响其他布局？

标签： cssvue.jsnuxtjs

解决方案

我找到了这个解决方案。

  1. 将“.css”文件重命名为“.scss”。

  2. 在您的布局中添加带有自定义类“my-class”的包装块。

layouts/AuthLayout：

<template>
  <div class="auth-layout">
    <section>
      <Nuxt/>
    </section>
  </div>
</template>
  1. 然后添加一个样式部分。这使用 SCSS 功能和 v-deep 指令。

layouts/AuthLayout：

<style scoped lang="scss">
 .auth-layout {
   &::v-deep {
    @import '~assets/path/to/style.scss';
    @import '~assets/path/to/custom.scss';
    // ...
  }
 }
</style>

推荐阅读