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

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" />

Answer 2

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 3

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

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

Answer 4

With Svelte v.3.24.0 it is possible to import css directly in your component's style tag:

<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.

Answer 5

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

Answer 6

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.