GUIDES
Webpack
Add Plumeria to a Webpack project, with one command or by hand.
examples/webpack shows how to use @plumeria/unplugin in Webpack.
The plugin compiles Plumeria styles into CSS, with HMR in development.
npx @plumeria/init detects Webpack and writes this setup for you; see @plumeria/init. The rest of this page is the same setup by hand.
Installation
npm i -D @plumeria/unpluginyarn add -D @plumeria/unpluginpnpm i -D @plumeria/unpluginUsage
import plumeria from '@plumeria/unplugin';
export default {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
plumeria.webpack(),
],
};plumeria.d.ts
@plumeria/core ships no prop declaration of its own, so name the styling prop your project compiles with.
For the default name (classStyle), reference the declaration that ships with the package:
/// <reference types="@plumeria/core/class-style" />If you set a custom styleProp (such as 'sx'), declare that name instead, and keep it the same as the one passed to the plugin; see Declaring the styling prop.