导入的样式不适用于组件 [英] Imported Styles are not applied to components

问题描述

我想创建一个单独的文件来存储IE 9-11的样式.为此，我创建了 InternetExplorer.scss 文件并将其导入主文件 styles.scss :

I would like to create separate file to store styles for IE 9-11. To do it, I've created and imported file InternetExplorer.scss into main file 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;
    }
}    

但是，声明的样式不适用于该页面.

However, the declared styles is not applied at the page.

但是，如果我在组件的styles属性中声明此样式，则IE样式会完美地应用:

However IE styles are applied perfectly, if I declare this style in styles property of component:

@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 的位置是:

Location of tabComponent is:

app/coreComponents/tabComponent

如果我用两个点写 @import"../scss/InternetExplorer.scss"; ，则要导入的文件找不到或不可读:../scss/InternetExplorer.scss

If I write with two dots @import "../scss/InternetExplorer.scss";, then File to import not found or unreadable: ../scss/InternetExplorer.scss.

如果我用一个点写 @import"./scss/InternetExplorer.scss"; ，则不会应用样式.

If I write with one dot @import "./scss/InternetExplorer.scss";, then style is not applied.

Angular版本是6.

The Angular version is 6.

如何从 InternetExplorer.scss 应用样式?

推荐答案

来自Angular文档:

From Angular documentation :

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

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

Since your scss folder is not in the local , try to add ./ to the path :

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

这篇关于导入的样式不适用于组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！