Polaris styles.css import problem

andgamb
New Member
2 0 1

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?

DeluxeDev
New Member
2 0 0

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?

0 Likes
andgamb
New Member
2 0 1

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

0 Likes
quentinlintz
New Member
2 0 1

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

DeluxeDev
New Member
2 0 0

Thanks @quentinlintz 

0 Likes