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

I had some trouble following Marvelous Walrus's answer, so here's a more explicit version of the same steps.

Rollup is the bundler used by svelte. (You might know webpacker as a bundler).

Step 1: Install the rollup css plugin:

npm install -D rollup-plugin-css-only

Step 2: edit rollup.config.js

you need to import the plugin you just installed at the beginning of rollup.config.js:

import css from "rollup-plugin-css-only";

and farther down in the file you need to find the array of plugins, and add a new on called css. For example I inserted it before the svelte plugin, which looks like this:

  plugins: [
    css({ output: "public/build/extra.css" }),
    svelte({ ... 

When rollup does it's thing, it will read all the css-files imported by your components, combine them into one, and write them to public/build/extra.css

Step 3: edit public/index.html

Add the link to the new css file. For me this looked like this:

Step 4: profit!

Now you are all set to use css files from your installed npm packages. for example I added bootstrap by

npm install bootstrap

then finding the css files I want to use (they were in /node_modules/bootstrap/dist/css/) and importing them in the beginning of App.svelte: