Javascript 如何在第三方css库中使用模具

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

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

我尝试了以下方法，但没有一种有效：

例1： 简单地在

index.html

中添加CDN

是不起作用的

例2： 我使用

npm

安装了Bulma CSS库，并尝试将其导入

app.CSS

文件，如下所示：

@import "../../node_modules/bulma/css/bulma.min.css";

或

文档中说，

app.css

用于全局样式。但这种方法也不起作用

---

如何将第三方CSS库添加到模具项目中？

可能有更好的方法，但解决此问题的快速方法是在每个组件CSS文件中导入第三方CSS库

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css");

---

除了JiiB提供的解决方案外，以下是如何设置全局

app.css

样式表：

在

src

目录中创建

app.css

文件，例如在

/src/global/app.css

将

globalStyle:'src/global/app.css'

添加到

/stecnil.config.ts

在

/src/index.html

中包含从

/build/app.css

生成的css文件：

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

---

我使用全局样式的解决方案是避免阴影dom。通过将

scoped=true

传递给

组件

装饰器来实现这一点

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

@组件({
标签：“我的组件”，
styleUrl:“我的组件.css”，
作用域：true，//注意：根据这一点，这是一种反模式，因为它会导致性能问题。阅读本文：虽然app.css作为全局css加载，但此处定义的样式对已将shadow设置为true的组件没有影响。若要使其正常工作，您必须在组件装饰器中将shadow设置为true。
@Component({
 tag: "my-component",
 styleUrl: "my-component.css",
 scoped: true, // <- This makes sure the component doesn't have native encapsulation
})