如何在 Ionic2 应用程序中为不同页面保持单独的样式规则

Question

我有三个不同的文件app.scss、movie-info.scss、movie-list.scss。app.scss文件中包含以下注释：

在此处放置要全局应用的样式规则。这些样式适用于整个应用，而不仅仅是一个组件。此外，此文件还可以用作导入要包含在输出 CSS 中的其他 Sass 文件的入口点。

这意味着此处的样式将应用于整个应用程序。出于这个原因，我将movie-info页面的样式放在movie-info.scss内。但是，放置在此处的样式仍会影响movie-list页面。为什么？如果样式应用于整个应用程序，使用不同的scss文件的目的是什么？

Answer 1

在你的movie-info.scss文件中，应该有一个命名空间集。例如：

movie-info-page{
//css style here
}

此命名空间在组件中设置为选择器。

@Component({
    selector: ' movie-info-page',
    templateUrl: 'movie-info.html',
})

放置在命名空间中的任何样式都将应用于特定页面。外部的所有样式都设置为全局样式，并将从页面设置为所有后续页面。如果要为整个应用使用全局样式，请在 app.scss 中设置希望这能回答你的问题。