在 AngularDart 组件和 Bootstrap 中使用 Less

Question

我已经开始将一个 AngularJS 应用程序迁移到 AngularDart，使用 Vic Savkin's sample app 作为骨架。

我现有的项目使用较少的 CSS。我不清楚如何将其包含在我的项目中。

具体来说，我在“lib”文件夹中有组件，在“web”文件夹中有 CSS。我希望能够在项目级别定义一些 Less 变量，这些变量将由组件使用。我希望在以后的其他项目中使用这些组件。

是否需要在每个组件的less文件中导入bootstrap.less和variables.less文件，还是有更高效的方法？

Answer 1

首先，如果你想在web 和lib 中使用某些东西，请将其放入lib。您可以使用package:mypackage/asset/css/mycss.css 从lib 导入到web，但反之则不行。

我猜你会避免使用 shadowDOM，因为 Bootstrap 不能很好地使用它。
如果您仍想使用 shadowDOM，则需要将 CSS 添加到每个组件中（当您有嵌套组件时可能仍然会造成麻烦）或修改 CSS 选择器。

如果您修改 CSS 选择器，您需要为每个规则添加额外的选择器，例如：

/* original */
.someclass .someotherclass { xxx: yyy; }


/* modify to */

.someclass .someotherclass,
* /deep/ .someclass /deep/ .someotherclass,
* /deep/ .someclass .someotherclass, /* might be necessary too */
 { xxx: yyy; }

如果您创建所有组件（并且仅使用不使用 shadowDOM 的 3rd 方组件），您可以将所有 CSS 放入 index.html 页面中，就像在 Angular.js 中一样。