Angular 6 种全局替代方式 css

Question

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

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

它会影响我整个应用程序中的日历组件。我怎样才能只为那个可操作的组件包含这个 css 并为所有其他组件禁用它。

在 handsontable 组件 scss 文件中写入导入无效。

提前致谢。

Answer 1

其工作原理如下。注意encapsulation: ViewEncapsulation.None。这将禁用默认值 Emulated DOM，因此该组件的样式也将适用于子项。否则，默认情况下 Emulate DOM 保护每个组件的范围（这就是它在您的情况下不起作用的原因）。

另请参阅 documentation。

但是，这实际上并不能解决您的问题。因为，根据文档：

[ViewEncapsulation] None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the 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{}

Angular 6 种全局替代方式 css

Angular 6 alterante way to global css

css

sass

handsontable

angular