3

Is it possible to import css-files to a separate layout so that styles are applied only to one layout without affecting others?

Denis
  • 71
  • 1
  • 5
  • Duplicate of [scoped-css-for-nuxt-js-layout](https://stackoverflow.com/questions/52536891/scoped-css-for-nuxt-js-layout) – sugars Aug 25 '20 at 07:12
  • Thanks, but it is necessary to include just css-files, but not to place styles in the layout component. – Denis Aug 25 '20 at 07:23
  • You can use `` rather than defining your CSS there itself, in your components. – butttons Aug 25 '20 at 12:05
  • @butttons, I tried this method, but the styles were imported globally anyway. – Denis Aug 27 '20 at 20:06

3 Answers3

4

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>
  1. 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>
Denis
  • 71
  • 1
  • 5
1

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.

sha
  • 147
  • 2
  • 16
0

credit to this github answer.

If you define the css/scss in your static/assets directory, and import them in the layout within a style tag:

<style lang="scss">
@import '~/assets/layout.scss';
</style>

You can then scope the styles per layout using:

// nuxt.config.js
build: {
  extractCSS: false, // true causes duplicate css (false is the default)
  splitChunks: {
    layouts: true
  }
}
laventnc
  • 175
  • 13