Import CSS in node_modules to Svelte

When we require importing of external CSS files where the files are bundled with other packages in node_modules then we need to import these CSS files into your Svelte components. also, if you’re using some libraries such as Bootstrap or Tailwind CSS, for instance. Here, we will discuss the various methods that you can use to import CSS from the node_modules folder into your Svelte project.

These are the following approaches to import the CSS in node_module to svelte:

Steps to Create a Svelte Application

Step 1: Install Svelte

npm create svelte@latest my-svelte-app
cd svelte-app
npm install
npm run dev

Project Structure:

Step 2: Install the dependencies:

npm install bootstrap

Updated Dependencies:

 "dependencies": {
    "bootstrap": "^5.2.0",
    "svelte": "^3.0.0"
  }

Direct Import in the <script> Block

This method enables you to include CSS files to some of the Svelte components. The benefit is that the styles are made specific to the component hence are not seen in other components.

Example: This example shows the importing the bootstrap module directly in the script tag.

<script>
	export let name;
	import 'bootstrap/dist/css/bootstrap.min.css';
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href=
"https://www.geeksforgeeks.org/">GeeksForGeeks Website to learn Svelte</a>
      to learn how to build Svelte apps.</p>
</main>

Output:

Using the Svelte <style> Block with Global Scope

Svelte styles components by default isolate the applied styles, meaning that the styles will not bleed into other components. Although, to define the styles globally within a component, we have to use the global keyword within the <style> block. With this approach, Bootstrap styles will be applied globally within the App.svelte component, and the .container class will have a margin of 20px. This ensures that Bootstrap’s styling is available while allowing you to add additional global styles.

Example: This example shows the use of style tag to add the CSS.

<style global>
  @import 'bootstrap/dist/css/bootstrap.min.css';
</style>
<main>
	<h1>Hello {name}!</h1>
	<p>Visit the 
    <a href=
"https://www.geeksforgeeks.org/">GeeksForGeeks Website to learn Svelte</a>
       to learn how to build Svelte apps.</p>
</main>

Output:

Importing CSS in root file (Global CSS)

In case you have to apply CSS universally throughout the entire Svelte application, it is possible to import the CSS file in the main.js or main.ts file. This makes sure that all the components in the app have the styles and this will make them to be uniform. when we import Bootstrap in main, it becomes available for use in all files that we may create in this project. js, which meant that the styles are applied to all the webpage and components in your Svelte application. This is especially helpful for stylesheets like libraries, for instance Bootstrap or Tailwind CSS that you wish to use across the entire application.

Example: This example shows the use of global CSS in mail file.

// index.js
import App from "./App.svelte";
import "bootstrap/dist/css/bootstrap.min.css";

const app = new App({
  target: document.body,
  props: {
    name: "GeeksForGeeks Articles",
  },
});

export default app;

Output: