我想创建单独的文件来存储 IE 9-11 的样式。为此,我创建并导入了文件InternetExplorer.scss
进入
主文件styles.scss
:
@import "scss/InternetExplorer.scss";
The InternetExplorer.scss
有一种风格:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.nav-tabs .nav-item {
margin-bottom: -1px;
z-index: 0;
}
}
但是,声明的样式不会应用在页面上。
但是,如果我在组件的 styles 属性中声明此样式,则 IE 样式可以完美应用:
@Component({
selector: 'tabComponent',
templateUrl: 'tabComponent.module.html',
styles:
`@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.nav-tabs .nav-item {
margin-bottom: -1px;
z-index: 0;
}
}`,
encapsulation: ViewEncapsulation.None
样式的位置是:
app/styles.scss
app/scss/InternetExplorer.scss
地点tabComponent
is:
app/coreComponents/tabComponent
如果我用两个点写@import "../scss/InternetExplorer.scss";
, then File to import not found or unreadable: ../scss/InternetExplorer.scss.
如果我写一个点@import "./scss/InternetExplorer.scss";
,则不应用样式。
Angular 版本是 6。
如何应用样式InternetExplorer.scss
?