Question

下面是我的scss文件

.mat {
@import "ej2-base/styles/material.scss";
@import "ej2-buttons/styles/material.scss";
@import "ej2-popups/styles/material.scss";
@import "ej2-splitbuttons/styles/material.scss";
}
.boot{
    @import "ej2-base/styles/bootstrap.scss";
    @import "ej2-buttons/styles/bootstrap.scss";
    @import "ej2-popups/styles/bootstrap.scss";
    @import "ej2-splitbuttons/styles/bootstrap.scss";
}

在这里，我想在将类更改为正文时加载材质主题。但是样式没有添加

我在这里拿了我的样品 scsssIssue.zip

回购步骤

下载以上示例
先提供npm i命令，然后再ng serve
您将在浏览器中看到按钮
然后单击click me按钮-样式将不会添加”

如果您像下面那样挑战scss

@import "ej2-base/styles/material.scss";
@import "ej2-buttons/styles/material.scss";
@import "ej2-popups/styles/material.scss";
@import "ej2-splitbuttons/styles/material.scss";

正确添加样式。

参考：https://github.com/sass/sass/issues/2888

Answer 1

这不是角度问题，也不是sass问题，而是您正在使用的组件库。由于他们使用大量#{&}进行范围界定，因此您的根选择器（例如.mat）将被重复使用/复制并创建诸如以下的规则：

.mat .mat.e-btn { }

请注意第二个.mat由其#{&}.e-btn选择器创建。

将scss文件导入父类css时无法正常工作

回购步骤

1 个答案: