Angular 6 alterante путь к глобальному css

Question

Я использую Handsontable в одном из моих компонентов, и это заставляет меня включать его css глобально в мой файл angular.json

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

, и это влияет на мой компонент календаря во всем моем приложении. Как я могу включить этот CSS только для этого компонента handsontable и отключить его для всех других компонентов.

Запись импорта в scss-файл компонента handsontable не работает.

Заранее спасибо.

Answer 1

Вы можете попробовать следующее

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

Answer 2

Это работает как показано ниже. Обратите внимание на encapsulation: ViewEncapsulation.None. Это отключит значение по умолчанию Emulated DOM, поэтому стили этого компонента будут также применимы к дочерним элементам. В противном случае по умолчанию Emulate DOM защищает области действия каждого компонента (поэтому он не работал в вашем случае).

См. Также документацию .

Однако это не решит вашу проблему на самом деле. Потому что согласно документации:

[ViewEncapsulation] None означает, что Angular не выполняет инкапсуляцию вида. Angular добавляет 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';