CODEWITHSUNDEEP
vue.jsmaterialize
DuchSuvaa
DuchSuvaa

Reputation: 676

Materializecss & vue3: how to use sass @extend to color text?

I've installed materializecss in my Vue 3.0 project using npm.
It's imported in my main.js:

import 'materialize-css/dist/css/materialize.min.css'

Everything works fine, but when I want to use @extend to color text, like this:

<style lang="scss">
  .a {
      @extend .grey-text, .text-lighten-3;
  }
</style>

I'm getting an error:

SassError: The target selector was not found.
Use "@extend .grey-text !optional" to avoid this error.

If I use "!optional", the rule isn't applied.
Is it possible to use materializecss sass extends in Vue3? If yes, how?

Upvotes: 0

Views: 643

Answers (1)

anatolhiman
anatolhiman

Reputation: 1859

You first have to import/initialize the Sass partial containing the CSS rule (selector) to be extended.

Sass in Vue component files is scoped and does not see any code from outside that file (even if you do not use the scoped keyword in the style tag). This is also how dart-sass works by default.

Presuming Materialize is installed as a node_module, and that the typography partial is where your extended class is located, you @use it like this:

@use 'materialize-css/sass/components/_typography' as *;

a {
  @extend .grey-text, .text-lighten-3;
}

Upvotes: 1

Related Questions