如何将stencil与第三方css库一起使用

Question

我是第一次尝试stenciljs 。我想构建一个小应用程序，而不仅仅是一个可重用的 Web 组件。

我的问题是是否有可能将Bootstrap、Skeleton或Bulma等第三方 CSS 库添加到我的应用程序中。

我尝试了以下方法，但似乎都不起作用：

示例1：

简单地添加 CDN<link rel="stylesheet" href="link-here">是index.html行不通的。

示例2：

我安装了 Bulma CSS 库并npm尝试将其导入到app.css文件中，如下所示：

@import "../../node_modules/bulma/css/bulma.min.css";

或者

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css");

文档说这app.css是针对全局样式的。但这个方法也不起作用。

如何将第三方 CSS 库添加到我的模板项目中？

Answer 1

可能有更好的方法，但解决此问题的快速方法是在每个组件 css 文件中导入第三方 CSS 库。

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css");