Doubt about global css config

[itepifanio]

Hi, I'm new with nuxtjs and I'm using your boilerplate.

I notice that your nuxt.config.js sets up a global css usage, but I have an index file that has your css overwritten by the global css setting. There's a way to export the global css into a file and import at the boilerplate layouts? So this way my index page, wich has an different layout, don't conflict with others css.

[SuretnoHQ]

Hi @itepifanio

Thanks for the feedback, I think your problem can be fixed if you re-arrange the position of importing a style file. My suggestion is :

1. Use style-scope in your index page, so the style will be affected only on that page
2. Create a custom style.scss (ex. my-own.scss) and add-it below these code { src: '~/assets/scss/style.scss', lang: 'scss' } at nuxt.config.js
3. Create a custom scss file and import it into your custom layout, using

   <style scoped>
   @import '~/assets/scss/your-own.scss'
   </style>

Thank you

[itepifanio]

Hi @itepifanio

Thanks for the feedback, I think your problem can be fixed if you re-arrange the position of importing a style file. My suggestion is :

1. Use [style-scope](https://vue-loader.vuejs.org/guide/scoped-css.html) in your index page, so the style will be affected only on that page

2. Create a custom style.scss (ex. my-own.scss) and add-it below these code `{ src: '~/assets/scss/style.scss', lang: 'scss' }` at `nuxt.config.js`

3. Create a custom scss file and import it into your custom layout, using

<style scoped>
  @import '~/assets/scss/your-own.scss'
</style>

Thank you

The custom style.scss worked. Thanks. I'm closing the issue now.