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

Question

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

Answer 1

我找到了这个解决方案。

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

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

layouts/AuthLayout：

<template>
  <div class="auth-layout">
    <section>
      <Nuxt/>
    </section>
  </div>
</template>

3. 然后添加一个样式部分。这使用 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>

Answer 2

我希望它对某人有帮助。如果您的样式文件具有.css扩展名，您可以通过这种方式将它们放在static布局head函数或对象中的目录和地址上（我的文件在static/css/main.css目录中）

    return {
      link: [
         //you shouldn't mention ~/static itself
        { rel: 'stylesheet', href: '/css/main.css' }, 
      ],
    };

如果你的文件有.scss扩展名或任何其他预处理器，你可以把它放在assets目录中，因为 webpack 在这个目录上编译文件。