I am trying to run an OSS LWC app on heroku using SLDS via synthetic shadow dom. When I run it locally using heroku local web everything looks great.


When it makes all the way to my Heroku site, I see unstyled garbage with an error message on the chrome console saying "Refused to apply style from 'https://some-app.herokuapp.com/SLDS/styles/salesforce-lightning-design-system.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

enter image description here

Any thoughts as to why this might be happening?

Here is my index html and js

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <title>my app</title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="shortcut icon" href="/resources/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="/SLDS/styles/salesforce-lightning-design-system.css" />
        <base href="/" />

import '@lwc/synthetic-shadow';
import { buildCustomElementConstructor } from 'lwc';
import MyApp from 'my/app';

customElements.define('my-app', buildCustomElementConstructor(MyApp));
  • Is there a CSS file available at that URI?
    – kurunve
    Jan 30, 2020 at 7:58
  • Yes, the CSS file is present at the specified location Jan 30, 2020 at 14:53
  • Hi there, I just had the same issue and it seems like the css files are just not watched when running npm run watch or something other here fails. For me restarting it, did the trick
    – itsmebasti
    Apr 24, 2020 at 18:08
  • Hi, I have a similar issue on a web app on Nodejs. Any pointers on that? Sep 5, 2020 at 4:28

1 Answer 1


I faced a similar issue.

Try adding the assets folder that contains the styling in your public folder. This worked for me and I can now use SLDS in my app.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .