Svelte-preprocess-css-mods NPM

svelte-preprocess-css-mods

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>