Angular 6替代全局css的方式

Posted 2023-03-22

【中文标题】Angular 6替代全局css的方式

【英文标题】：Angular 6 alterante way to global css

【发布时间】：2019-04-03 07:56:56

【问题描述】：

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

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

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

在handsontable组件scss文件中写入导入不起作用。

提前致谢。

【问题讨论】：

为什么会影响日历组件？如果您在日历中重用handsontable 样式，在callendar 的样式中覆盖它们是否更容易？

【参考方案1】：

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

另请参阅documentation。

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

[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';

【参考方案2】：

你可以试试下面的

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

【讨论】：

这行不通。由于ViewEncapsulation 以及路径指定不正确，node_modules 在目录结构上的一些级别，它应该类似于：../../node_modules....，具体取决于组件的深度级别。

@muradm 问题只想将 css 应用于特定组件，而不是整个应用程序

是的，但是该组件也是 Angular 组件，并且由于 Emulated DOM，您无法从当前组件中设置父组件或子组件的样式。那就是问题的问题：writing import in handsontable component scss file doesn't work