Question

我希望将Angular Elements与外部库（Kendo UI）一起使用。我设法创建了一个组件并将其添加到我的应用程序中。问题在于Kendo的CSS弄乱了我所有的应用样式。

关于如何封装CSS仅适用于组件而不泄漏到父应用程序其余部分的想法？

谢谢

UPDATE

有关代码，请参见以下stackblitz： https://stackblitz.com/edit/angular-kpmnjg

如果我构建代码，则会得到4个.js文件和styles.css文件（包含Kendo UI的样式）。将文件添加到干净的html页面中可以正常工作。但是，一旦我将它们添加到我的应用程序中，styles.css就会渗入我的应用程序，弄乱样式（按钮/输入/等）。

Answer 1

在没有Kendo UI知识的情况下，仅阅读了有关角度元素的信息，总体而言，我如何封装CSS的方法是使用SASS并执行

.angular-element-class {
  @import 'path/to/kendo.css';
}

或者希望Kendo UI是否具有SASS API

@import 'path/to/kendo.scss';

.angular-element-class {
  @include kendo-mixin-needed-for-angular-element;
}

Answer 2

创建一个_kendo.scss并导入所有必要的样式表：

@import '~@progress/kendo-theme-bootstrap/scss/dropdownlist';
@import '~@progress/kendo-theme-bootstrap/scss/grid';
@import '~@progress/kendo-theme-bootstrap/scss/input';
@import '~@progress/kendo-theme-bootstrap/scss/popup';
@import '~@progress/kendo-theme-bootstrap/scss/tabstrip';
....

您需要安装kendo npm模块，此功能才能正常工作。

然后使用您的styles.scss

@import './kendo';

更新：

我的猜测是，由于它们是全球进口的，它们正在渗透。所以说你有

<kendo-grid>
...
    <table>
      <th>

网格中的样式会渗入表格，因为kendo会这样做CSS：

.kendo-grid th { ...

因此，除了创建比这更糟糕的反规则以外，实际上没有其他方法可以解决，我们也必须在我们的项目中这样做。我们正在摆脱kendo，它不太适合棱角。

也许您只需导入即可解决

@import '~@progress/kendo-theme-bootstrap/scss/grid';

组件本身中的

并不全局。虽然我还没有测试过。它还将在导入它的每个组件中复制SCSS，并炸毁捆绑包的大小。

Answer 3

它对我有用，只是删除了.css文件扩展名。

因此，不要将您的import语句设为

@import 'path/to/file.css'

您可以尝试做类似

的操作

 @import 'path/to/file'

Angular Elements-外部库的CSS

3 个答案: