2

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

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

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

示例 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 库添加到我的模板项目中？

4

3 回答 3

0

我使用全局样式的解决方案是避免使用 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
})
于 2020-06-23T14:47:51.873 回答
0

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

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css");
于 2018-10-13T18:54:52.370 回答
0

除了来自 JiiB 的解决方案之外，还有如何设置全局app.css样式表：

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

  3. 包括从/build/app.cssin生成的 css 文件/src/index.html：

    <link href="/build/app.css" rel="stylesheet">
于 2018-10-14T08:10:30.967 回答