FROM CACHE - en_header
Promotion image

Polaris styles.css import problem

andgamb
Shopify Partner
8 0 6
‎08-19-2020 04:13 PM

I followed the steps of the tutorial https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with... and thats where it fails.

I obviously have the classes in the html - so TextStyle in index.js from @shopify/polaris seems to work

class-polaris-positive.PNG

In Frontend  it still looks like this:

frontend-sample-app.PNG

showing no Stylesheet in the Html Head:

 

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="next-head-count" content="2"><link rel="preload" href="/_next/static/chunks/main.js?ts=1597864669431" as="script"><link rel="preload" href="/_next/static/chunks/webpack.js?ts=1597864669431" as="script"><link rel="preload" href="/_next/static/chunks/pages/_app.js?ts=1597864669431" as="script"><link rel="preload" href="/_next/static/chunks/pages/index.js?ts=1597864669431" as="script"><noscript id="__next_css__DO_NOT_USE__"></noscript><script charset="utf-8" src="/_next/static/chunks/0.js"></script></head>

 

 

Adding the stylesheet manually in Html head brings up the correct styling...

 

whats wrong?

1,262 Views
1 Like
Report
Replies 4 (4)

DeluxeDev
Visitor
2 0 0
‎09-02-2020 01:05 PM

I'm getting exactly the same issue. I'm suspicious of this message when the node app starts

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

The link above blames the @zeit/next-css plugin, but removing it doesn't solve the issue either.

@andgamb did you get any further with it?

1,240 Views
0 Likes
Report
In response to DeluxeDev

andgamb
Shopify Partner
8 0 6
‎09-02-2020 01:07 PM

No sadly I didn't - getting on with the Tutorial leads to many more Polaris related issues...

Would be nice the Writer of the tutorial would check in 😉

1,236 Views
0 Likes
Report
In response to andgamb

quentinlintz
Visitor
2 0 1
‎09-02-2020 05:14 PM

@andgamb @DeluxeDev 

In my app I have the import:

 

import "@shopify/polaris/styles.css";

 

Without the dist folder in the path. I think this is the newer way of doing it.

If you still get the error I highly recommend just using the Shopify CLI to generate a sample app for you. That way everything is already setup and imported and you can focus solely on development.

1,222 Views
1 Like
Report
In response to quentinlintz

DeluxeDev
Visitor
2 0 0
‎09-04-2020 05:53 PM

Thanks @quentinlintz 

1,184 Views
0 Likes
Report
Terms of Service Privacy Policy