3

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.

beautiful

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">
    <head>
        <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="/" />
    </head>
    <body>
        <my-app></my-app>
    </body>
</html>

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

customElements.define('my-app', buildCustomElementConstructor(MyApp));
Improve this question
4
  • Is there a CSS file available at that URI?
    – kurunve
    Commented Jan 30, 2020 at 7:58
  • Yes, the CSS file is present at the specified location
    – Mitch Spano
    Commented 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
    Commented Apr 24, 2020 at 18:08
  • Hi, I have a similar issue on a web app on Nodejs. Any pointers on that?
    – Apex Srinivas
    Commented Sep 5, 2020 at 4:28

1 Answer 1

Reset to default
2

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.

Improve this answer

You must log in to answer this question.

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