java - 将 css 导入样式/主题

Question

我正在考虑更换 Polymer Elements附加 Material Designs Lite (MDL) css/js 库，这样我就可以为 Vaadin 设计带有更多 native 组件的布局。

我发现访问 Polymer Elements 的内部节点是一个巨大的挑战，例如 Paper-Card具有用于卡片内容、卡片 Action 等的内部 div。使用 native Vaadin 组件设置卡片的内容或 Action 可能很困难，因为它们使用 getRoot() 和 appendChild() 构建得更接近 html 的树结构，我不能只使用 addComponent(new Card())，更不用说设计和布局会变得难以协调。因此，我宁愿有一个一致的标准来设计和使用组件，而不必担心我使用的是 Polymer 还是 Vaadin 组件。

所以我的想法是，如果我用 MDL 替换，那么我应该能够将 Materials 的样式应用于 Vaadin UI 对象，而无需创建元素和导入 Polymer html 组件的开销。

但是，我似乎在导入所需的 CSS 时遇到了问题。我已将 javascript 库添加到我的 UI 类中，并使用 Chrome 中的开发工具确认它包含在内。但是样式不适用。将 css 导入 styles.scss 有问题吗？

样式.scss

@import "https://code.getmdl.io/1.1.2/material.indigo-pink.min.css"
@import "../valo.css"
....

或者是否有另一种方法可以实现我的最终目标，即使用 Vaadin 进行 Material 设计，比上述方法更简单、更容易使用？

Answer 1

想通了。 material.css 需要重命名以使用 scss 文件类型。 (material.css -> material.scss) 然后被正确导入。