How to use stencil with third-party css library

Question

I'm trying out stenciljs for the first time. I want to build a little application and not just a reusable web component.

My question is if there's any possibility to add a third-party CSS library like Bootstrap, Skeleton or Bulma to my app.

I tried the following things, but none of them seem to work:

Example 1:

Simply adding a CDN <link rel="stylesheet" href="link-here"> in the index.html did not work.

Example 2:

I installed the Bulma CSS library with npm and tried to import it in the app.css file like this:

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

or

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

The docs say that app.css is for global styles. But this method didn't work either.

How can I add a third-party CSS library to my stencil project?

score 1 · Accepted Answer · answered Oct 13 '18 at 18:54

1

There might be a better way but the quickfix for this problem is importing the thrid-party CSS library in every component css file.

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

answered Oct 13 '18 at 18:54

JiiB

1,432
1
12
26

1

Note: according to this this is an anti-pattern as it causes performance issues. Read this article: https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/ – Safa Alai May 12 '20 at 23:54

score 0 · Answer 2 · answered Oct 14 '18 at 08:10

0

In addition to the solution from JiiB this is how to setup a global app.css stylesheet:

Create the app.css file within the src directory, for example at /src/global/app.css
Add globalStyle: 'src/global/app.css' to the config object in /stecnil.config.ts
Include the generated css file from /build/app.css in /src/index.html:
```
<link href="/build/app.css" rel="stylesheet">
```

answered Oct 14 '18 at 08:10

RienNeVaPlu͢s

7,442
6
43
77

2

While app.css is loaded as a global css, styles defined here have no effect on components where shadow has been set to true. To make things work you would have to not set shadow to true in the component decorator. – Safa Alai May 12 '20 at 23:56

score 0 · Answer 3 · answered Jun 23 '20 at 14:47

My solution to using global styles was to just avoid the shadow-dom. Did this by passing scoped=true to the Component decorator.

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

How to use stencil with third-party css library

Example 1:

Example 2:

3 Answers3