导入的样式不适用于组件

时间:2018-11-08 15:38:14

标签: css angular sass

我想创建单独的文件来存储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中的样式?

1 个答案:

答案 0 :(得分:1)

来自Angular文档:

  

/ * AOT编译器需要./来表明它是本地的* /

由于您的scss文件夹不在本地,请尝试将./添加到路径:

@import "./scss/InternetExplorer.scss";