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

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";
}

在这里，我想加载 material 主题，同时将 class 更改为未添加的 body.But 样式

这里我附上了我的样本 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";

样式添加正确。

Reference : https://github.com/sass/sass/issues/2888

Answer 1

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

.mat .mat.e-btn { }

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

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

While importing scss file into parent class css not working properly

sass

angular

angular-cli-v9

回购步骤