Вложение scss с файлами main.scss и подкомпонентами scss

Question

У меня есть один глобальный main.scss файл, в котором я объявил один

.small-size-text{
font-size: 12px;
}

И в файле подкомпонента как login.scss я определил еще один класс как

@import 'main.scss';

.title-content{
    color: red
    }

Теперь я должен использовать то же свойство, что и для одного className.

<p className='title-content'> Hello World</p>

Который содержит оба свойства?

как .title-content{font-size: 12px; color: red}

Answer 1

вам нужно расширить свой второй класс с помощью первой операции импорта, каскадной, чтобы вы могли сделать это:

основной номер

 .small-size-text{
    font-size: 12px;
    }

login.scss

@import 'main.scss';

.title-content{
    @extend .small-size-text;
    color: red;
}