1

I'm working on a project with (vite, vue 3, ts, and bootstrap) and I can't get "@extend" to work through postCSS.

This is a sample project i created to show as an example of what i want to do: Github repo

if you look at the file src/components/HelloWorld.vue You will see that there is a button with two bootstrap classes ("btn" and "btn-success).

What I want to do is through postCSS implement the @extend functionality to achieve something like this

<template>
  <div class="text-center">
    <button type="button" class="my-btn">Success</button>
  </div>
</template>

<style scoped>
  .my-btn {
    @extend btn btn-success;
  }

</style>

But I can't get this to work, I'm new into postCSS and I don't quite understand what configuration I'm missing to achieve what I want to do.

I have already tried these plugins

https://www.npmjs.com/package/postcss-nesting

https://www.npmjs.com/package/postcss-nested

https://www.npmjs.com/package/postcss-apply

but it seems none of them makes the trick.

Any ideas ?

EDIT: I used @extend prop since is the one I think should be the keyword, but maybe is something like @apply, not sure really.

EDIT 2: I was able to make it work using postcss-extend-rule but only if the extended class was on the same vue file style scope. I think the problem here is to make postCSS able to find bootstrap global classes.

example:

/*this will work*/
.my-class { 
  color: red; 
  background: pink; 
} 

.my-btn { 
  @extend .my-class; 
}


/*this will not work*/
.my-btn { 
  @extend .btn; 
}
Franco Aguilera
  • 617
  • 1
  • 8
  • 25
  • 1
    Perhaps you could try: [postcss-extend-rule](https://www.npmjs.com/package/postcss-extend-rule). You may need to adjust your syntax for `@extend` to be: `@extend .btn .btn-success;`. As an aside, I am not sure if you can use multiple selectors as part of a single `@extend` (I have never tried). – segFault May 21 '23 at 05:54
  • I did manage to make a progress with that plugin you mention, but it only works if I do something like .my-class { color: red; background: pink; } .my-btn { @extend .my-class; } I mean, the extended class needs to be on the same vue file style scope, but not able to make it work with a global classes from bootstrap – Franco Aguilera May 21 '23 at 06:21

1 Answers1

0

You need to import bootstrap.css in the file where you @extend its selectors. Otherwise, PostCSS will not be able to process them.

In HelloWorld.vue:

<style>
/* no "node_modules" needed */
@import 'bootstrap/dist/css/bootstrap.css';

.my-class {
  color: red;
  background: pink;
}

.my-btn {
  @extend .btn, .btn-success;
}
</style>

result

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Maksim I. Kuzmin
  • 1,170
  • 7
  • 16
  • do you think there a way in which I can make the bootstrap import in just one place and then use the extend in other files ?. it doesn't seem to have much logic to import boostrap css file in each of the .vue files of my entire aplication – Franco Aguilera May 24 '23 at 19:16