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

error

bjelli · Answer 1 · 2020-01-18T11:38:20.367

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

Doesn't seem to be valid for svelekit – chovy Jan 31 '22 at 19:47 — chovy, Jan 31 '22 at 19:47

score 16 · Answer 2 · edited May 27 '20 at 23:33

16

Install the rollup css plugin:

npm install -D rollup-plugin-css-only

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" })

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

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

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

edited May 27 '20 at 23:33

montrealist

5,593
12
46
68

answered Jun 15 '19 at 06:30

Marvelous Walrus

433
3
7

1

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: https://github.com/hidjou/classsed-svelte-tutorial/blob/master/rollup.config.js#L6. – Mosh Feu Nov 05 '19 at 06:53
1

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 – Jeff Dec 07 '19 at 18:19
1

@Jeff 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. – GavinR Dec 13 '19 at 15:04
Thanks @GavinR I hadn't thought of that part – Jeff Dec 14 '19 at 16:12
1

currently this does not seems to work anymore. rollup complains about error that i'm importing non-javascript file. Any advice? – Joonhwan Jan 02 '20 at 06:26
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 – AutoCiudad Jan 16 '20 at 11:36

Dmitry Kurmanov · Answer 3 · 2021-02-17T09:48:36.863

16

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.

edited Feb 17 '21 at 09:48

answered Nov 05 '20 at 17:28

Dmitry Kurmanov

765
2
12
19

3

that `global` is hidden gem! – Jaydeep Feb 14 '21 at 13:12
It is github.com/sveltejs/svelte-preprocess feature. I've updated answer. – Dmitry Kurmanov Feb 17 '21 at 09:49

score 2 · Answer 4 · answered Sep 17 '20 at 10:35

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

Install rollup-plugin-css-only

yard add -D rollup-plugin-css-only

Or

npm i -D rollup-plugin-css-only

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, ""))
            }
        }),
    ]
}

Now import it in App.svelte

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

Add this to your index.html file

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

score 1 · Answer 5 · answered Jul 12 '20 at 10:01

1

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

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

answered Jul 12 '20 at 10:01

Souk

11
1

Daniel · Answer 6 · 2019-06-06T19:38:47.287

0

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

edited Jun 06 '19 at 19:38

answered Jun 06 '19 at 18:40

Daniel

34,125
17
102
150

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 – iwgx Jun 06 '19 at 18:44
1

there's a way to add css files with postcss and rollup, but it seems a little less convenient https://lengstorf.com/code/learn-rollup-css/ – Daniel Jun 06 '19 at 19:39

score 0 · Answer 7 · answered Apr 28 '23 at 15:47

0

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>

answered Apr 28 '23 at 15:47

CyberRobot

686
9
20

score -1 · Answer 8 · answered Jun 07 '19 at 07:09

-1

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.

answered Jun 07 '19 at 07:09

Michael Fürstenberg

756
3
9

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. – Michael Fürstenberg Jun 07 '19 at 11:06
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. – Michael Fürstenberg Jun 07 '19 at 11:13
unfortunately, [my code](https://ibb.co/wRy3FGx) is same with your answer – iwgx Jun 08 '19 at 20:40
2

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. – Michael Fürstenberg Jun 10 '19 at 19:15

Import css in node_modules to svelte

8 Answers8

Linked