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

Question

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

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

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

示例1：

仅在<link rel="stylesheet" href="link-here">中添加CDN index.html无效。

示例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. 在app.css目录中创建src文件，例如在/src/global/app.css
2. 将globalStyle: 'src/global/app.css'添加到config中的/stecnil.config.ts对象中

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

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

Answer 3

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

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