Comments (6)
@finken2 - what bundler are you using?
What happens if you do...
@use '@carbon/charts/scss'
or
@use '@carbon/charts/scss/index.scss'
from carbon-charts.
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.
from carbon-charts.
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.
from carbon-charts.
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
from carbon-charts.
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?
from carbon-charts.
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.
from carbon-charts.
Related Issues (20)
- [Enhancement]: Allow repeating name in different categories in Alluvial charts
- [Bug]: `ccv-gauge-chart` Not Displaying Correctly in Production - `this.getHolder()` from the core is not working HOT 1
- AVT1 Violation in GaugeChart component
- [Bug]: Exported CSV encoding in Excel
- [Task]: Add Angular version tags to previous versions
- [Bug]: export as png and expost as jpg giving error on safari 17 HOT 2
- Keyboard opearability in HistogramChart
- [Bug]: Missing tick labels in timeseries line and bar charts. HOT 1
- [Bug]: Duplicate tick labels in timeseries line/bar charts. HOT 1
- [Accessibility]: aria-label of charts toolbar all have same ID
- [Accessibility]: Simple bar chart bars with value 0 do not have aria-label
- [Enhancement]:
- Does `@carbon/charts-react` support React 17? HOT 1
- [Bug]: BarChartGrouped is missing the following properties: chart, ref
- [Bug]: StackedBarChartOptions is missing from the typescript exports for carbon charts react
- [Bug]: Redefined variables violating no-shadow rule
- [Bug]: Warnings from missing properties
- [Bug]: Cannot find module 'topojson-specification' or its corresponding type declarations
- [Bug]: charts-react SSR render fails starting with 1.13.10 HOT 4
- [Bug]: Selecting the legend on a StackedBarChart doesn't work if data is loaded in after the initial load
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from carbon-charts.