时间戳

首页 > 解决方案 > 导入的样式不适用于组件

css - 导入的样式不适用于组件

问题描述

我想创建单独的文件来存储 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;
    }
}

但是，声明的样式不会应用于页面。

但是，如果我在组件的样式属性中声明此样式，则可以完美应用 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？

标签： cssangularsass

解决方案

来自 Angular 文档：

/* AOT 编译器需要./显示这是本地的 */

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

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

推荐阅读