用main.scss和子组件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

您需要用级联的第一个导入工作扩展您的二等类，这样您就可以这样做了：

主scss

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

login.scss

@import 'main.scss';

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