Я работаю над проектом с (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 можно использовать для создания анимаций и игр на веб-страницах.
Вам нужно импортировать 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>