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

【问题标题】：How to include local (not global) stylesheet file for each layout in Nuxtjs如何在 Nuxtjs 中为每个布局包含本地（非全局）样式表文件
【发布时间】：2020-12-13 20:00:10
【问题描述】：

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

【问题讨论】：

重复scoped-css-for-nuxt-js-layout
谢谢，但是只需要包含 css 文件，而不是在布局组件中放置样式。
您可以使用<style src="./my-component.css"></style>，而不是在组件中自行定义 CSS。
@buttons，我试过这个方法，但是样式还是全局导入的。

标签： css vue.js nuxtjs

【解决方案1】：

我找到了这个解决方案。

将“.css”文件重命名为“.scss”。
在你的布局中添加自定义类“my-class”的包装块。

layouts/AuthLayout:

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

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

【讨论】：

【解决方案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 在这个目录中编译文件。

【讨论】：