My goal is to create a separate file specifically for storing styles targeted at IE 9-11. In order to achieve this, I have created a file named InternetExplorer.scss and imported it into my main file styles.scss:
@import "scss/InternetExplorer.scss";
The InternetExplorer.scss file contains the following style:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.nav-tabs .nav-item {
margin-bottom: -1px;
z-index: 0;
}
}
Unfortunately, despite declaring these styles, they are not being applied on the page.
Interestingly, if I directly declare the IE specific styles within the component's styles property like this:
@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
The respective locations for the files are as follows:
app/styles.scss
app/scss/InternetExplorer.scss
The location of the tabComponent is in the directory:
app/coreComponents/tabComponent
When attempting different import paths, such as using two dots with
@import "../scss/InternetExplorer.scss";File to import not found or unreadable: ../scss/InternetExplorer.scss.Similarly, using one dot with
@import "./scss/InternetExplorer.scss";This project is utilizing Angular version 6. How can I successfully apply the styles from InternetExplorer.scss in this setup?