How to import CSS from node_modules in Svelte

In this article, we will learn about how to import a CSS file from node_modules in a Svelte component.

We will use Rollup to bundle our app which is the preferred bundler used by svelte. (you might be familiar with webpacker)

  1. Install the rollup plugin to process CSS files.
npm install -D rollup-plugin-css-only

2. After installing the plugin, we need to configure the plugin in rollup.config.js; This configuration will tell rollup to read the CSS imports and write them in the specified CSS file.

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

export default {
   input: 'src/main.js',
   output: { … },
   plugins: [
     css({ output: 'public/custom.css' }),
     svelte({ …
}; 

3. Add the CSS file to public/index.html

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

Now we can use CSS files from installed npm packages.