Doubt about global css config
itepifanio opened this issue · comments
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.
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 :
- Use style-scope in your index page, so the style will be affected only on that page
- Create a custom style.scss (ex. my-own.scss) and add-it below these code
{ src: '~/assets/scss/style.scss', lang: 'scss' }
atnuxt.config.js
- Create a custom scss file and import it into your custom layout, using
<style scoped>
@import '~/assets/scss/your-own.scss'
</style>
Thank you
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.