How to import CSS files to Svelte

Learn how to import CSS from node_modules into Svelte components.

Here’s how you import a CSS file from node_modules in a Svelte component.

Install the rollup plugin to process CSS files.

npm i rollup-plugin-css-only

Configure the plugin in rollup.config.js. This will tell rollup to read the CSS imports and write them in a file called vendor.css.

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

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

Add the CSS file to index.html.

  <html lang="en">
  <head>
	...
+	<link rel='stylesheet' href='/build/vendor.css'>
    ...
    <script defer src='/build/bundle.js'></script>

  </head>

  <body>
  </body>
  </html>

Import your CSS file in App.svelte. It’s not necessary to use the full path to node_modules.

<script>
+   import 'notyf/notyf.min.css';
	export let name;
 </script>

 <main> <h1> Hello {name}! </h1> </main>

 <style> h1 { color: #ff3e00; } </style>

Free Resources

Attributions:

undefined by undefined