Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community creator
svelte
import css

How to import CSS files to Svelte

Carlos Roso

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.

  1. Install the rollup plugin to process CSS files.
npm i rollup-plugin-css-only
  1. 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({
      ...
    }),
    ...
};
  1. 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>
  1. 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>

RELATED TAGS

css
community creator
svelte
import css

CONTRIBUTOR

Carlos Roso
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring