How to include local (not global) stylesheet file for each layout in Nuxtjs

I found this solution.

1. Rename ".css" files to ".scss".

2. In your layout add the wrapper block with custom class "my-class".

layouts/AuthLayout:

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

3. Then add a style section. This uses SCSS features and the v-deep directive.

layouts/AuthLayout:

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

I hope it would be helpful for somebody. If your style files have .css extension you can put them on static directory and address in your layout head function or object in this way (my file is in static/css/main.css directory)

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

if your file has .scss extension or any other preprocessor you can put it in assets directory cause webpack compile files on this directory.