PostCSS не может найти глобальные классы начальной загрузки CSS при использовании @extend из postcss-extend-rule в vite

Я работаю над проектом с (vite, vue 3, ts и bootstrap) и не могу заставить «@extend» работать через postCSS.

Это пример проекта, который я создал, чтобы показать, что я хочу сделать: Репозиторий Github

если вы посмотрите на файл src/components/HelloWorld.vue вы увидите, что там есть кнопка с двумя классами начальной загрузки ("btn" и "btn-success").

Что я хочу сделать, так это реализовать через postCSS функциональность @extend для достижения чего-то подобного

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

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

</style>

Но я не могу заставить это работать, я новичок в postCSS и не совсем понимаю, какой конфигурации мне не хватает для достижения того, что я хочу сделать.

Я уже пробовал эти плагины

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

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

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

но, кажется, ни один из них не делает трюк.

Есть идеи ?

Обновлено: я использовал @extend prop, так как я думаю, что это должно быть ключевым словом, но, возможно, это что-то вроде @apply, на самом деле не уверен.

Обновлено еще раз: я смог заставить его работать с помощью postcss-extend-rule, но только если расширенный класс находился в той же области стиля файла vue. Я думаю, проблема здесь в том, чтобы заставить postCSS находить глобальные классы начальной загрузки.

пример:

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

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


/*this will not work*/
.my-btn { 
  @extend .btn; 
}

🤔 А знаете ли вы, что...
JavaScript можно использовать для создания анимаций и игр на веб-страницах.


1
121
1

Ответ:

Решено

Вам нужно импортировать bootstrap.css в файл, где вы @extend его селекторы. В противном случае PostCSS не сможет их обработать.

В 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>