Vuejs scoped & unscoped CSS in the same .vue file

I’d like to have scoped style & unscoped style in the same .vue file at the same time. The reason is because I have some component specific style that I want to be scoped, but also some vue-boostrap custom style that I’d like to apply, but because the elements are in another component (the vue-bootstrap one), if I scope this style it won’t work. However, this custom bootstrap styles are specific to this component, so I’d like to have the CSS written in this same file, to avoid files hell.

So I’d like to have <style lang="scss"> and <style lang="scss" scoped> at the same time. But when I do, it only takes the scoped one. Any ideas ?

You should be able to use multiple style tags like that. Here’s an example:

There must be something else going on. Can you replicate your issue in a Codesandbox for us?

You might find these links useful for understanding what your options are and what’s supposed to work:

If you’re having problems then it may be down to the specific version that you’re using.


Sorry I don’t have much time to answer, but thank you for your replies. The deep selectors realy helped me for my problem (