Webpack 为什么不是'；我的mdDialog组件'；是否包含SCSS文件？

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

...

        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>
    ) { }
}

我还尝试将对话框样式分解到它们自己的文件中，并通过组件上的

style

直接注入样式

---

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

结果是样式表正在加载，但样式的作用域是属性选择器，这打破了我的后代选择器

例如，

.messaging panel.message text

将变成

.messaging panel[some\u other\u attr\u id]。message text[some\u attr\u id]

。问题在于父选择器具有不同的作用域属性，这打破了样式规则

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

更新：Madhu Ranjan提供了一个更合适的方法

组件样式通常仅应用于组件中的HTML 自己的模板

使用/deep/选择器在子对象中强制下推样式 将组件树转换为所有子组件视图。/deep/选择器 适用于嵌套组件的任何深度，并且适用于 查看组件的子级和内容子级

因此，要从主机将DOM中的所有子元素作为目标，我们需要使用

  :host /deep/ <selector>{}

：host/deep/{}

例如

阅读更多关于它的信息

  :host /deep/ <selector>{}