Vuejs/Nuxtjs Unable to scope the styles to specific component when used with @import?

Question

I am developing an application using Vuejs/Nuxtjs. I would like to import some styles from the external CSS file and would like to include those styles only to that particular Vuejs/Nuxtjs component. Hence, I tried to add the scoped and @import to my styles but this is not working for me.

Code:

<style scoped>
@import "@/assets/css/drawflow.css";

.nodeContainer{
  padding-top: 10px;
}

.node{
  border-radius: 20px;
}
</style>

I tried to search about this issue and tried some of the alternatives mentioned here such as: 1.

<style scoped src="@/assets/css/drawflow.css">
.nodeContainer{
  padding-top: 10px;
}

.node{
  border-radius: 20px;
}
</style>

<style scoped lang="css" src="@/assets/css/drawflow.css">
.nodeContainer{
  padding-top: 10px;
}

.node{
  border-radius: 20px;
}
</style>

For some reason nothing seems to work and styles are not working. If I remove the scoped from <style> then everything is working perfectly but the styles are leaking to another component as well. Can someone please let me know how to fix this issue?

*** Edited based on @kissu response ***

thanks for your suggestion and response. As mentioned in the comment on your answer, I have created the sample project in Codesandbox.

When I use it without scoped and adding all styles in a single <style> tag my application looks something like this:

https://user-images.githubusercontent.com/29374160/168595607-700c099f-5adf-4d6c-86ab-ac9885f2e659.gif

When I use the style with scoped as mentioned in your answer then my application looks something like this:

https://user-images.githubusercontent.com/29374160/168595645-60edfb85-c409-40f0-8483-39e2d60bb4a7.gif

My application is not picking the styles from drawflow.css at all when I use scoped, hence it appears something like this. Note: I have not made any other changes apart from your answer.

I hope I am able to express my issue, I am not sure what's wrong here. Can someone please help me solve this issue?

Answer 1

You could use CSS modules as shown here but this is probably not what you want overall.

There is also this solution but it's importing the whole thing globally (it's not scoped).

---

But at the end, the simplest solution is to write it like that

<style scoped src="@/assets/css/drawflow.css">
</style>

<style scoped>
.nodeContainer {
  padding-top: 10px;
}

.node {
  border-radius: 20px;
}
</style>

The CSS import will be scoped and the other style will be scoped too.

I have to say that it's more tricky than in SASS but it works well (and installing SASS for just that is not worth anyway).