Published at Nov 10, 2020

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