Nuxt.js: Any way import CSS with scoped

Created on 2 Sep 2017 · 4Comments · Source: nuxt/nuxt.js

I put each of the page CSS at bottom of script tag , like example
<style src="~/assets/css/about.css"></style>
but when i route to another page, if the new page element have the same CSS class with previous page element, it will take the previous page CSS, i know put my CSS in style tag with scoped will prevent this case happen, so any way i can import my CSS in style tag with scoped? I tried
<style scoped> @import '~/assets/css/about.css'; </style>
but it not working, any one can teach me how to do it :)

_{This question is available on Nuxt.js community (#c1392)}

Source

gfriend-malaysia

Most helpful comment

Hello

In your page, do you try this ?

<style src="~/assets/css/about.css" scoped>

Have a good day ;)

jleveugle on 3 Sep 2017

👍3 🎉1

All 4 comments

Hello

In your page, do you try this ?

<style src="~/assets/css/about.css" scoped>

Have a good day ;)

jleveugle on 3 Sep 2017

👍3 🎉1

@jleveugle thanks you so much, and may i ask you one more question ? after i check on
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
the style tag with scoped css whether it is not supported on major desktop and mobile browser? :)

gfriend-malaysia on 3 Sep 2017

Don't be worried, your CSS rules and HTML tag have a uniq data tag. Your CSS rules are prefixed when compiling to impact this template only ;)

You can show the result in your DOM, like this

capture d ecran 2017-09-03 a 13 55 17