CODEWITHSUNDEEP
javascriptcssreactjscarbon-design-system
batman
batman

Reputation: 61

Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide

I'm using the react library of carbon design charts and I'm getting intermittent error 'Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.'

I am importing the css in app.scss which is imported in index.js. @import '~@carbon/charts/styles.css';

It works when I execute the code on localhost, but when the code is built with npm build it gives this error sometimes and the complete page goes blank.

also tried importing in the css in component file, import '@carbon/charts/styles.css';

Upvotes: 2

Views: 3407

Answers (3)

nstuyvesant
nstuyvesant

Reputation: 1516

Spent a lot of time experimenting to see what was missing. Finally was able to get it working by adding these to my package.json (in addition to @carbon/charts and @carbon/charts-angular):

"carbon-components": "^10.52.0",
"@carbon/themes": "^10.50.0",

In my global styles.scss (although could be in a component's scss)...

@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap";
@import '@carbon/themes/scss/themes';
@import 'carbon-components/scss/globals/scss/styles.scss';
@import "@carbon/charts/styles/styles.scss";

Upvotes: 2

Illinois47
Illinois47

Reputation: 77

Pls verify that the styles are actually being applied.

I've seen this issue many times in angular, and usually you have to move the import around to see where it'll actually take effect. I usually use app.component.ts or a higher-level file like that

Also, we do have an angular getting started guide https://charts.carbondesignsystem.com/?path=/story/docs-getting-started--angular

Upvotes: 0

Lygis
Lygis

Reputation: 100

@import, is for importing into css file, so put your import inside of index.css on top. Or you can try doing import '~@carbon/charts/styles.css without @ inside of index.js

Upvotes: 0

Related Questions