I'm trying to import css from Splidejs. In their Documentation they have written to import css like this:
import @splidejs/react-splide/css
This way it works in the project build but does not work in storybook. The Package.json file of Splidejs has defined exports as:
"exports": {
".": {
"require": "./dist/js/react-splide.cjs.js",
"import": "./dist/js/react-splide.esm.js",
"default": "./dist/js/react-splide.esm.js"
},
"./css": "./dist/css/splide.min.css",
"./css/core": "./dist/css/splide-core.min.css",
"./css/*": "./dist/css/themes/splide-*.min.css"
}
So i tried importing the above css file like this:
import @splidejs/react-splide/dist/css/splide.min.css
And now it works in storybook but doesn't work in project build.
My guess is that in the project build the keyword '/css/' is again replaced with what's defined in the last line of exports of splidejs/package.json.
"./css/*": "./dist/css/themes/splide-*.min.css"
Which corrupts the css path.
So how can I import css from a package with respect to whats defined in exports of package.json
P.S. I'm making a npm package that is why i want both project build and storybook to work same way.