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

Question

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

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

我尝试了以下方法，但其中 none 似乎有效：

示例 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 样式表的方法：

在 src 目录中创建 app.css 文件，例如 /src/global/app.css
将globalStyle: 'src/global/app.css'添加到/stecnil.config.ts

config

将 /build/app.css 生成的 css 文件包含在 /src/index.html 中：
```
<link href="/build/app.css" rel="stylesheet">
```

Answer 3

我使用全局样式的解决方案是避免阴影-dom。通过将 scoped=true 传递给 Component 装饰器来做到这一点。

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

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

How to use stencil with third-party css library

javascript

css

twitter-bootstrap

typescript

stenciljs

示例 1：

示例 2：