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