使用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;
}