Svelte CSS Modules loader

The loader is a complement to the svelte-loader to enable the use of CSS Modules classname on Svelte components. Make sure to install the svelte-loader along with the svelte-cssmodules-loader

``bash
npm install --save-dev svelte-cssmodules-loader svelte-loader
`

Webpack Configuration

The svelte-cssmodules-loader is doing all its work on a "raw" Svelte component (before the compilation). The loader needs to be executed before svelte-loader.

`js
...
module: {
rules: [
...
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: [
'svelte-loader',
'svelte-cssmodules-loader',
]
}
...
]
}
...
`

$3

Set your own localIdentName rule by using any available token from webpack interpolateName.

`js
...
module: {
rules: [
...
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: [
'svelte-loader',
{
loader: 'svelte-cssmodules-loader',
options: {
localIdentName: '[local]-[hash:base64:6]', // your rule here
}
}
]
}
...
]
}
...
`

Please note: if the option is not defined, the default rule [local]-[hash:base64:6] will be applied.

Usage on Svelte Component

On the HTML markup (not the CSS), Prefix any class name that require CSS Modules by $style. => $style.My_CLASSNAME

`html



My red text

After svelte-cssmodules-loader, the component will be transformed to

`html



My red text

The loader only generates CSS Modules classname to the html class values prefixed by $style.. The rest is left untouched.

Before

`html



My blue text

`html



My blue text

`html



My blue text

`html



My blue text

kebab-case or camelCase, name the classes the way you're more comfortable with. svelte-cssmodules-loader will make no difference.

Before

`html



Red
Crimson
Majenta
`

After svelte-cssmodules-loader

`html



Red
Crimson
Majenta
`

Example

Webpack Config

`js
module: {
...
rules: [
{
test: /\.svelte$/,
exclude: /node_modules/,
use: [
{
loader: 'svelte-loader',
options: {
emitCss: false
}
},
{
loader: 'svelte-cssmodules-loader',
options: {
localIdentName: '[hash:base64:10]'
}
}
]
}
]
...
},
`

Svelte Component

`html