CODEWITHSUNDEEP
cssvue.js
Adam Chew
Adam Chew

Reputation: 81

Vue: Possible to import an scss file with deep selector into the component's scoped styles?

I wanted to find out if its possible to separate a vue component's scoped scss with deep selectors into a another file and have it imported back in?

Example:

// Main.vue
<template>
<div id="main">
  <h1>Title</h1>
  <span>Text</span>
</div>
</template>

<style lang="scss" scoped>
#main::v-deep {
  &>h1 {
    font-size: 10rem;
  }
  &>span {
    font-size: 5rem;
  }
}
</style>

Could I somehow achieve this:

// Main.vue

...
<style lang="scss" scoped>
@import url('./Main.scss');
</style>

// Main.scss

#main::v-deep {
  &>h1 {
    font-size: 10rem;
  }
  &>span {
    font-size: 5rem;
  }
}

without having this style applied to components that may have id/class="main" anywhere else in the project? Mainly just scoped to this component?

Upvotes: 8

Views: 1627

Answers (1)

Md Shahadat Hossain
Md Shahadat Hossain

Reputation: 1

You can use :deep() { @import './Main.scss' } to import whole scss file and it will work for your child components too.

Upvotes: 0

Related Questions