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

Tamer

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

Ailment

Doesn't seem to be valid for svelekit – Oberon

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

Foursquare

It's a good answer (which should be accepted, by the way). Maybe it worth to show the pieces of code so it will be much easier to understand. Or, at least, link to those pieces in the example repo. For example: github.com/hidjou/classsed-svelte-tutorial/blob/master/…. – Heaviness

I'm hoping someone sees this even though I'm posting much later. I'm wondering what the point is in installing via npm instead of just copying the minified css and js files and storing them in your static folder yourself. Since you have to link them in the template.html or index.html file anyway why not just copy the raw files themselves and then you don't have to import the css in the script of your .svelte files – Onetime

@Onetime I think the main reason would be for maintainability - in like 2 years when you're having to update dependencies, you might not remember to copy/paste the updated css code into "public/global.css" - if you do it this way you can simply update your dependency in package.json and be done. – Willy

Thanks @Willy I hadn't thought of that part – Onetime

currently this does not seems to work anymore. rollup complains about error that i'm importing non-javascript file. Any advice? – Precis

It's work fine if the imported .css do not refenences images, in which case the images will not be found Example importing datatables.net-dt/css/jquery.dataTables.min.css returns [08:27:47] 404 ─ 0.39ms ─ /images/sort_asc.png – Monogyny

Answer 3

With Svelte v.3.24.0 and svelte-preprocess it is possible to import css directly in your component's style tag.

rollup.config.js:

import autoPreprocess from 'svelte-preprocess';

...
svelte({
    preprocess: autoPreprocess({
        postcss: true,
        scss: { includePaths: ['src', 'node_modules'] },
    })
}),
...

component:

<style lang="scss" global>
    @import '../node_modules/my-package/cssfile';
    @import '../node_modules/my-package/scssfile.scss';
</style>

• component's style tag should contain lang="scss" attribute.
• and please notice that css file's import should be without an extension after the file name

So we don't need to install any additional Rollup plugins here.

Io

that global is hidden gem! – Ionia

It is github.com/sveltejs/svelte-preprocess feature. I've updated answer. – Io

Answer 4

For whoever is interested in this, I'm using this neat solution:

---

1. Install rollup-plugin-css-only

yard add -D rollup-plugin-css-only

Or

npm i -D rollup-plugin-css-only

---

2. Use it in your rollup.config.js

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

export default {
    plugins: [
        css({
            output: function (styles, styleNodes) {
                // Filter out any source map imports
                let reg = new RegExp(/^(\/*).*(.map) ?(\*\/)$/gm);
                writeFileSync("public/build/base.css", styles.replace(reg, ""))
            }
        }),
    ]
}

---

3. Now import it in App.svelte

<script>
    import "../node_modules/uikit/dist/css/uikit.min.css";
</script>

---

4. Add this to your index.html file

<link rel="stylesheet" href="/build/base.css" />

Plugugly

Answer 5

You should be able to import a CSS file directly inside the script block.

// path/to/your/+page.svelte
<script>
  import 'uikit/dist/css/uikit.min.css';
</script>

Homesick

Works for me. I use Sveltekit and Vite. Other suggested solutions are overly complicated for this case. – Ru

Answer 6

With Parcel as the bundler, you can put in your index.js (entry point)

@import 'milligram/dist/milligram.min.css'

Waterbuck

Answer 7

Not familiar with UI kit, but from the information provided, it seems to me that you should be importing (using @import) it inside a scss or sass file, not a css file. Using @import in a css file does not get interpreted, but as you can see, just shows up in your browser as a reference to a file in node_modules directory, which is not available to the browser.

Assuming you're using rollup, in order to process scss files, you will likely need to add the svelte-preprocess-sass dependency for rollup to support sass (and scss).

https://github.com/ls-age/svelte-preprocess-sass

Libb

yes, i'm using rollup. But are you sure I should using sass? So in svelte, we must import css file in sass file for them to worked? Seems inconvenience – Tamer

there's a way to add css files with postcss and rollup, but it seems a little less convenient lengstorf.com/code/learn-rollup-css – Libb

Answer 8

So if you want to use UIKit I would go look at the information on the homepage.

From HTML markup section in the introduction on UIKit site:

You need to add:

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

to the head of your html file.

So in your case you could point to your node_modules folder like

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

in your template.

Gerek

Was that what you meant with "Using tag inside index.html"? Then I think we might need to see some code to better answer your question. – Cytoplast

From your screenshot I see that you serve up your page, but what is your "root" or "public" folder? That path you have set for the css file is most likely wrong relative to your root. – Cytoplast

unfortunately, my code is same with your answer – Tamer

Most likely the software you use to serve up your code won't allow you to traverse outside the /public folder. So I would create a /css folder inside public and copy the uikit file there. And update your markup in index.html. – Cytoplast