Svelte Tutorial: 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 webpack)

• Install the rollup plugin to process CSS files.

npm install -D rollup-plugin-css-only

• 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({ …
}; 

• Add the CSS file to public/index.html

<link href="custom.css" />