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

Question

我是第一次尝试模板。我想构建一个小应用程序，而不仅仅是一个可重用的 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. 在/stecnil.config.ts中向config对象添加globalStyle: 'src/global/app.css'

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

   <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
})