Skip to content
This repository was archived by the owner on Sep 25, 2024. It is now read-only.

use css modules in svelte

License

ryoppippi/svelte-preprocess-css-mods

Repository files navigation

svelte-preprocess-css-mods

npm version npm downloads

JSR JSR

Successor of svelte-preprocess-cssmodules

Installation

npx nypm add -D svelte-preprocess-css-mods

Usage

Config

// svelte.config.js import { cssModules } from 'svelte-preprocess-css-mods'; export default { preprocess: cssModules({/* options */}), };

See options for more information.

Svelte

<!-- App.svelte --> <script> import styles from './App.module.css'; </script> <div class={styles.container}>	<h1 class={styles.title}>Hello World!</h1> </div>
/* App.module.css */ .container { display: flex; justify-content: center; align-items: center; } .title { color: red; }

get converted into:

<script> const styles = { container: 'App_module_container', title: 'App_module_title', }; </script> <div class={styles.container}>	<h1 class={styles.title}>Hello World!</h1> </div> <style>  .App_module_container {  display: flex;  justify-content: center;  align-items: center;  }   .App_module_title {  color: red;  } </style>

Related Works

License

MIT

About

use css modules in svelte

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Contributors 2

  •  
  •