为什么没有包含我的 mdDialog 组件的 SCSS 文件？答案

【问题标题】：Why isn't my mdDialog component's SCSS file being included?为什么没有包含我的 mdDialog 组件的 SCSS 文件？
【发布时间】：2017-12-15 20:10:07
【问题描述】：

我有一个相当基本的Angular Material dialog 组件，可以向用户传递消息：

...

        let dialogRef = this.dialog.open(
            UserMessagingDialog,
            {
                data: {
                    'messages': this.messagesToShow,
                    'messageColors': this.messageColors,
                    'messageIcons': this.messageIcons
                },
                hasBackdrop: false,
                panelClass: 'messaging-panel'
            }
        );

        dialogRef.afterClosed().subscribe(result => {
            // angular.element('messaging .messaging-icon').removeClass('rotate-cw tinted');
        });
    }
}

@Component({
    selector: 'user-messaging-dialog',
    templateUrl: './user-messaging.dialog.html',
    styleUrls: ['./user-messaging.component.scss']
})
export class UserMessagingDialog {
    constructor(
        @Inject(MD_DIALOG_DATA)

        public data: any,
        public dialogRef: MdDialogRef<UserMessagingDialog>
    ) { }
}

我正在尝试设置内部工具栏的样式，因此我已经包含了父组件的 SCSS 文件，如上所示。但是，它没有被应用。构建是通过 Webpack/Angular-CLI。

SCSS 文件包含纯 CSS，并且正确包含在使用相同路径调用对话框的组件中：

.messaging-panel .message-text {
    padding-top: 2px;
    padding-left: 8px;
    white-space: normal;
}
/* ... plus about 80 more lines */

我也尝试过将对话框样式分解为它们自己的文件，并通过组件上的styles 直接注入样式。

对话框是否接受 CSS 文件，如果接受，为什么它对我不起作用？

【问题讨论】：

标签： webpack sass angular-material angular-cli mddialog

【解决方案1】：

组件样式通常只适用于组件的 HTML 自己的模板。

使用 /deep/ 选择器将样式强制向下通过子元素组件树到所有子组件视图中。 /deep/ 选择器适用于任何深度的嵌套组件，它适用于查看组件的子项和内容子项。

所以要从我们需要使用的主机定位它在 DOM 中的所有子元素，

  :host /deep/ <selector>{}

例如Plunker。

阅读更多关于它的信息here。

【讨论】：

【解决方案2】：

事实证明，样式表正在加载，但样式被属性选择器限定范围，这种方式破坏了我的后代选择器。

例如，.messaging-panel .message-text 将变为 .messaging-panel[some_other_attr_id] .message-text[some_attr_id]。问题是父选择器具有不同的范围属性，这违反了样式规则。

我的解决方案是在这些情况下删除父选择器。

更新：Madhu Ranjan 提供了更合适的solution。

【讨论】：