0

下面是我的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";
}

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

在这里，我附上了我的示例 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

4

1 回答 1

1

这不是 Angular 或 sass 的问题，而是您正在使用的组件库。由于他们使用了很多#{&}' 来确定范围，因此您的根选择器（例如.mat）将被重新使用/复制并创建如下规则：

.mat .mat.e-btn { }

注意第二个.mat是由他们的#{&}.e-btn选择器创建的。

于 2020-08-11T08:22:21.843 回答