A Webpack CSS loader for UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces
If you want an easy way of customizing your theme while loading it in your webpack compiled stylesheets then this loader is for you ;) That includes usage with CSS modules.
- Create a sass/less (less is recommended as it's easier to theme out of the box with UIkit) file for your UIkit variables.
- Add the uikitLoader after the sass/less loader.
- Configure the loader with the location of your variables file.
Assuming you put your variables here: ./custom/theme.less
{
test: /\.less$/,
loaders: ["style", "css?modules&importLoaders=2", "less", "uikit?theme=custom/theme.less"]
}
Inside your webpack config object:
{
[ ... ]
uikitLoader: {
theme: 'custom/uikit.scss'
},
plugins: [
{
test: /\.scss$/,
loaders: ["style", "css?modules&importLoaders=2", "sass", "uikit"]
}
]
}
webpack.config.js:
{
[ ... ]
uikitLoader: {
theme: 'custom/uikit.less',
test:
},
plugins: [
{
test: /\.less$/,
loaders: ["style", "css", "less", "uikit"]
}
]
}
The default value of uikitLoader.test
is /node_modules\/uikit\/.+less$/
to avoid affecting your own .less code by default.
In your custom/uikit.less
file:
// UIkit
// ========================================================================
@import "~uikit/dist/less/uikit-variables.less";
@icon-font-path: "../../fonts";
@base: "default";
// Theme
// ========================================================================
// LESS related
@import "~uikit/themes/@{base}/variables.less";
// Defaults
@import "~uikit/themes/@{base}/base.less";
// Layout
@import "~uikit/themes/@{base}/grid.less";
@import "~uikit/themes/@{base}/panel.less";
@import "~uikit/themes/@{base}/block.less";
@import "~uikit/themes/@{base}/article.less";
@import "~uikit/themes/@{base}/comment.less";
// Navs
@import "~uikit/themes/@{base}/nav.less";
@import "~uikit/themes/@{base}/navbar.less";
@import "~uikit/themes/@{base}/subnav.less";
@import "~uikit/themes/@{base}/breadcrumb.less";
@import "~uikit/themes/@{base}/pagination.less";
@import "~uikit/themes/@{base}/tab.less";
@import "~uikit/themes/@{base}/thumbnav.less";
// Elements
@import "~uikit/themes/@{base}/list.less";
@import "~uikit/themes/@{base}/description-list.less";
@import "~uikit/themes/@{base}/table.less";
@import "~uikit/themes/@{base}/form.less";
// Common
@import "~uikit/themes/@{base}/button.less";
@import "~uikit/themes/@{base}/icon.less";
@import "~uikit/themes/@{base}/close.less";
@import "~uikit/themes/@{base}/badge.less";
@import "~uikit/themes/@{base}/alert.less";
@import "~uikit/themes/@{base}/thumbnail.less";
@import "~uikit/themes/@{base}/overlay.less";
@import "~uikit/themes/@{base}/column.less";
// JavaScript
@import "~uikit/themes/@{base}/dropdown.less";
@import "~uikit/themes/@{base}/modal.less";
@import "~uikit/themes/@{base}/offcanvas.less";
// Need to be loaded last
@import "~uikit/themes/@{base}/text.less";
@import "~uikit/themes/@{base}/utility.less";
@import "~uikit/themes/@{base}/contrast.less";
Now you can re-use variables and mixins from uikit in your own code!