可以通过在组件的样式表中引入外部CSS来应用外部样式,而无需使用ViewEncapsulation.None。
例如,在组件样式表中引入样式表.css:
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss', './styles.css']
})
请注意,上例中的“styles.css”是在组件样式表中引入的外部CSS文件名。在这种情况下,组件的本地样式将与外部样式合并,并应用于组件的HTML模板。
但是,在这种方法中,外部CSS类和ID选择器可能会与全局样式表冲突。因此,建议使用BEM方法命名属于组件的CSS类和ID选择器。
另外,您也可以使用Angular的全局样式表来定义全局样式并应用于所有组件中。具体方法是在angular.json文件中添加全局样式表路径:
"styles": [
"src/styles.scss",
"src/global-styles.css" //将全局样式表路径添加到这里
],