Import external css files

[td0m]

I'd like to import a css file alongside the component, is this possible like so or using a different syntax?

This is what I use with react, but it fails in stencil, can you add a css-loader or provide us with an alternative solution? Thanks 🔢

import "@material/button/dist/mdc.button.css";

[adamdbradley]

You can use styleUrls to import external css files. Importing CSS through ES module imports is not something on our plan to support.

[cipriancirstea]

How would one use styleUrls to import multiple css files?

[rtpHarry]

@cipriancirstea I guess you solved this or gave up, but I just hit this issue and solved it by making it an array, like:

@Component({
  tag: 'pharm-modal-dialog',
  styleUrls: [
    '../../../../node_modules/simplebar/dist/simplebar.min.css',
    'modal-dialog.css',
  ],
  shadow: false
})

I don't know if there is a better way to do this with a less brittle path, but trying to put the path starting with @simplebar/... didn't work.

[milobluebell]

only first one will be applied

[will-hu-0]

Try this, at least it works for me.

@Component({
  tag: 'your-component,
  styleUrl: 'your-component.scss',
  shadow: true,
})
export class YouComponent {
...
render() {
  return (
    <Host>
      <link rel="stylesheet" href="your CSS" />
      <div......>
    </Host>
  )
}

[christian-bromann]

We recently released a fix that resolved the bug around styleUrls. A Stencil component should now be able to read from multiple urls, e.g.:

@Component({
  tag: 'my-component',
  styleUrls: ['reset.scss', 'roboto.scss', 'css-variables.scss', 'core.scss'] 
})
export class MyComponent {
  // ...
}

see #5131. It was released with v4.8.2. Please let me know if there are still issues with this.

[gregorypratt]

@will-hu-0 won't the browser make multiple network requests to that stylesheet in the link tag if it is referenced from multiple components?

[will-hu-0]

@will-hu-0 won't the browser make multiple network requests to that stylesheet in the link tag if it is referenced from multiple components?

It does make multiple requests..
I have tested with the solution provided by @christian-bromann , and it works like a charm:

We recently released a fix that resolved the bug around styleUrls. A Stencil component should now be able to read from multiple urls, e.g.:

@Component({
  tag: 'my-component',
  styleUrls: ['reset.scss', 'roboto.scss', 'css-variables.scss', 'core.scss'] 
})
export class MyComponent {
  // ...
}

see #5131. It was released with v4.8.2. Please let me know if there are still issues with this.