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 AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

You TubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Attributions:

undefined by undefined