@sardine/webpack-plugin-typed-css
The @sardine/webpack-plugin-typed-css
creates a .d.ts
file with css classes and ids to be imported by TypeScript.
Getting Started
First, you'll need to install @sardine/webpack-plugin-typed-css
:
npm install --save-dev @sardine/webpack-plugin-typed-css
And then configure your webpack config file:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.module\.css$/,
use: [
"style-loader",
{
loader: "@sardine/webpack-plugin-typed-css",
options: {
banner: "Hey, @sardine/webpack-plugin-typed-css created this file for you!"
}
},
{
loader: "css-loader",
options: {
modules: true,
}
}
],
}
]
}
};
How does it work?
This loader depends on css-loader
and the modules
option to be enabled.
Webpack plugins are executed in the reverse order they are defined in the webpack config file. So, the @sardine/webpack-plugin-typed-css
loader must be defined before the css-loader
.
Options
Name | Type | Default | Description |
---|---|---|---|
banner |
{Boolean|String} |
true |
Creates a message at the beginning of each generated .d.ts file. |
banner
Type: {Boolean|String}
Deafault: true
Creates a message at the beginning of each generated .d.ts
file. You can specify your own message by passing your own string.