我想创建单独的文件来存储IE 9-11的样式。为此,我创建了文件并将其导入InternetExplorer.scss
到主文件中styles.scss
:
@import "scss/InternetExplorer.scss";
该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
是:
app/coreComponents/tabComponent
如果我用两个点写@import "../scss/InternetExplorer.scss";
,File to import not found or unreadable: ../scss/InternetExplorer.scss.
如果我用一个点写@import "./scss/InternetExplorer.scss";
,则不会应用样式。
Angular版本是6。
如何应用样式InternetExplorer.scss
?
从Angular文档中:
/ * AOT编译器需要
./
显示它是本地的* /
由于您的scss文件夹不在本地,请尝试添加./
到路径:
@import "./scss/InternetExplorer.scss";
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句