角6变元到全局css

Question

我在我的组件中使用Handsontable，它迫使我将它的css全局包含在我的angular.json文件中

"styles": [
         "./src/styles.scss",
          "./node_modules/handsontable/dist/handsontable.full.css"
       ],

它会影响我所有的应用程序中的日历组件。我如何才能包括这个css仅用于该手持式组件，并禁用它的所有其他组件。

在手持式组件scss文件中写入导入不起作用。

提前谢谢。

Answer 1

如下所示。注意encapsulation: ViewEncapsulation.None。这将禁用默认的Emulated DOM，因此该组件的样式也将适用于子组件。另外，默认情况下，Emulate DOM保护每个组件的作用域(这就是为什么在您的情况下它不能工作)。

也请参考文档。

然而，这并不能真正解决你的问题。因为，根据文件：

ViewEncapsulation无任何意味着角没有视图封装。角将CSS添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到HTML中本质上是一样的。

什么是有效的，输出将以任何方式在全球范围内。

因此，可能在主styles.scss中添加一次就更容易了

@import '~/handsontable/dist/handsontable.full.css';

使用ViewEncapsulation.None封装。

// component.ts
@Component({
  selector: 'app-table',
  template: `<hot-table ....></hot-table>`,
  styleUrls: ['./table.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TableComponent {
...
}

// component.scss
@import '~/handsontable/dist/handsontable.full.css';

Answer 2

您可以尝试以下方法

@Component({
    selector: 'app-home-component',
    template: '<div></div>',
    styleUrls: [
        'path/handsontable.full.css',
        './home.component.css'
    ], 
})
export class HomeComponent{}