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 the css file, with

@import '../node_modules/uikit/dist/css/uikit.min.css"

But that's not work, wherever i'm import that

• App.svelte style
• Inside global.css
• Using tag inside index.html

Is this not available yet?

Or am I should install that with yarn, and after that I have to copy required file to outside node_modules just like [this solution]?(How to add css from node_modules to template.html in Svelte)

I think this is not restriction just for uikit, instead the way we import third party css file in node_modules into svelte app

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:

<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="stylesheet" href="/build/extra.css" /> <link rel="stylesheet" href="/global.css" /> <link rel="stylesheet" href="/build/bundle.css" /> 

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:

<script>   // build/extra.css is fed from css files imported here   import "../node_modules/bootstrap/dist/css/bootstrap.min.css";   import "../node_modules/bootstrap/dist/css/bootstrap-grid.min.css"; 

Open Questions

Rollup does not seem to handle the sourcemaps that are mentioned in bootstrap.min.css and bootstrap-grid.min.css. So when I open the developer tools I get a warning about not being able to load the sourcemaps

Answer 2

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