3

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

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

谢谢

UPDATE

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

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

4

3 回答 3

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;
}
于 2018-08-03T16:15:16.147 回答
1

创建_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，它不太适合 angular。

也许你可以通过只导入来解决它

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

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

于 2018-08-03T16:19:43.750 回答
0

它对我来说只是删除 .css 文件扩展名。

因此，而不是将您的导入语句作为

@import 'path/to/file.css'

你可以尝试做类似的事情

 @import 'path/to/file'
于 2019-02-07T16:48:48.147 回答