如何將 stencil 與第三方 css 庫一起使用

Question

我第一次嘗試使用stenciljs 。 我想構建一個小應用程序，而不僅僅是一個可重用的 Web 組件。

我的問題是是否有可能向我的應用程序添加第三方 CSS 庫，如Bootstrap 、 Skeleton或Bulma 。

我嘗試了以下操作，但似乎都不起作用：

示例 1：

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

示例 2：

我使用npm安裝了 Bulma CSS 庫，並嘗試將其導入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");

Answer 2

除了 JiiB 的解決方案之外，這是設置全局app.css樣式表的方法：

1. 在src目錄中創建app.css文件，例如在/src/global/app.css
2. 添加globalStyle: 'src/global/app.css'的config在目標/stecnil.config.ts

3. 將/build/app.css中生成的 css 文件/build/app.css在/src/index.html ：

    <link href="/build/app.css" rel="stylesheet">

Answer 3

我使用全局樣式的解決方案是避免使用 shadow-dom。 通過將scoped=true傳遞給Component裝飾器來做到這一點。

@Component({
 tag: "my-component",
 styleUrl: "my-component.css",
 scoped: true, // <- This makes sure the component doesn't have native encapsulation
})