Open finken2 opened 1 month ago
@finken2 - what bundler are you using?
What happens if you do...
@use '@carbon/charts/scss'
or
@use '@carbon/charts/scss/index.scss'
We're using webpack. The first one fails the same way, but the 2nd one does work. A little weird to need to the index.scss
there, but at least it works. I tried like 100 different approaches, and i swear that was one of them, but who knows. Thanks for the suggestion.
I started this conversation on Slack by asking "what's the recommended way to load styles in 1.x?" and was directed to open an issue. We should get the docs updated to whatever the expected working approach is. I doubt i'm the only one who got tripped up by the change between versions.
Webpack is finicky about resolving paths and it's unfortunately not good at using the modern conventions for package.json exports.
There is a new docs website in a PR under review. I just added the reference for this file to it.
BTW... if you have an option to use vite instead of webpack, I think you'll find it's faster and requires less configuration.
To add on to this, I'm trying to install just @carbon/charts-react
and not both /charts
and /charts-react
. When installing the charts-react styling using @import '@carbon/charts-react/styles.css';
it works but again, the goal is to use use
not import
.
I think the issue here may come from having the exports mapping to the dist/
directory, because in our component library we bundle and ship the styles.css
file without being explicit on exports, and are able to use @use '@our/package/styles'
and don't have to specify .css or import
We also can't re-write our entire bundler just to solve this one issue.
Additionally, looking at the docs out right now it includes the following for Getting started
import { StackedBarChart } from '@carbon/charts-react'
import '@carbon/charts-react/styles.css'
We can't really be expected to import .css files directly into our code in 2024 and not put into our styling tree right?
To add on to this, I'm trying to install just
@carbon/charts-react
and not both/charts
and/charts-react
. When installing the charts-react styling using@import '@carbon/charts-react/styles.css';
it works but again, the goal is to useuse
notimport
.I think the issue here may come from having the exports mapping to the
dist/
directory, because in our component library we bundle and ship thestyles.css
file without being explicit on exports, and are able to use@use '@our/package/styles'
and don't have to specify .css or import
Only @carbon/charts
publishes the SCSS unfortunately so if you want to use @use
with an SCSS file, you would need to do
@use '@carbon/charts/scss/index.scss';
There are two exports in package.json for the same file. See https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/package.json#L13 (and line 14).
The @carbon/charts
package.json has no SCSS exports pointing to the dist directory - only CSS.
Application/Team
IBM Cloud Satellite
What happened?
We were previously using
@use '@carbon/charts/styles'
with @carbon/charts 1.6.14, but this isn't working with newer version. I've tried many variations with 1.15.7 and can't get any of them to work.@import '@carbon/charts/styles.css';
does work, but i'd prefer to use@use
if possible.Version
@carbon/charts 1.15.7
Data & options used
No response
Relevant log output
No response
StackBlitz example
No response
What priority level would this be in your opinion?
P3