2.2 KiB
vite-plugin-imba
The official Imba plugin for Vite.
Usage
// vite.config.js
import { defineConfig } from 'vite';
import { imba } from 'vite-plugin-imba';
export default defineConfig({
plugins: [
imba({
/* plugin options */
})
]
});
Options
Config file
Config file resolving
Besides inline options in Vite config, vite-plugin-imba
will also automatically resolve options from an Imba config file if it exists (imbaconfig.json
or imba.config.js
). The JavaScript one is recommended since we'll add a defineConfig
helper function to provide autocomplete for the options in the future
To set a specific config file, use the configFile
inline option. The path can be absolute or relative to the Vite root. For example:
// vite.config.js
export default defineConfig({
plugins: [
imba({
configFile: 'my-imba-config.json'
})
]
});
A basic Imba config looks like this:
// imba.config.js
export default {
// imba options
theme: {}
};
Disable automatic handling of Imba config
Use configFile: false
to prevent vite-plugin-imba
from reading the config file or restarting the Vite dev server when it changes.
// vite.config.js
export default defineConfig({
plugins: [
imba({
configFile: false
// your imba config here
})
]
});
Warning: You are responsible to provide the complete inline config when used.
Imba options
These options are specific to the Imba compiler.
compilerOptions
- You can specify your own pallette of colors using
// vite.config.js
export default defineConfig({
plugins: [imba({
compilerOptions: {
theme: {
colors: {
"myblue": "blue",
"lilac": {
"2": "hsl(253, 100%, 95%)",
"4": "hsl(252, 100%, 86%)"
},
}
}
}
})],
});
Imba will take care of generating color variants from 1 to 9 based on the provided values.
Full stack Usage
In order to use the plugin both in the client and the server (with SSR and hydration), see the example in ../e2e-tests/vite-ssr-esm
Credits
- imba vite plugin