Import css in node_modules to svelte

Question

I want to use css framework in my svelte project, in this case it was uikit.

I had install it with yarn add uikit

And of course i have to import

Answer 1

1. Install the rollup css plugin:

npm install -D rollup-plugin-css-only

2. Go to rollup.config.js and configure it by adding the installed plugin to the plugin list, with the output param where the value is a css file. Later that file will be created in your public folder and the contents of the original css file will be copied into it:

css({ output: "public/uikit.css" })

3. Go to index.html and add the link to your file to the head section:

<link rel="stylesheet" href="uikit.css" />

4. import the original webkit css file into the script tag of your Svelte component:

import "../node_modules/uikit/dist/css/uikit.min.css";

The solution is not mine. All credits go to this guy (circa 6:00 in the video): https://www.youtube.com/watch?v=RBQg89ak_NY