1

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

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 | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.