Storybook - Import css from exports defined in package.json

Viewed 20

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.

0 Answers
Related