UIkit Loader
A Webpack CSS loader for UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces
When should I use this?
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.
Usage
- 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.
Examples
Assuming you put your variables here: ./custom/theme.less
Configure by query
test: /\.less$/ loaders: "style" "css?modules&importLoaders=2" "less" "uikit?theme=custom/theme.less"
Configure by loader options
Inside your webpack config object:
... uikitLoader: theme: 'custom/uikit.scss' plugins: test: /\.scss$/ loaders: "style" "css?modules&importLoaders=2" "sass" "uikit"
Reuse UIkit variables in your own .less files
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 // ======================================================================== "~uikit/dist/less/uikit-variables.less"; @icon-font-path: "../../fonts";@base: "default"; // Theme // ======================================================================== // LESS related "~uikit/themes/@{base}/variables.less"; // Defaults "~uikit/themes/@{base}/base.less"; // Layout "~uikit/themes/@{base}/grid.less"; "~uikit/themes/@{base}/panel.less"; "~uikit/themes/@{base}/block.less"; "~uikit/themes/@{base}/article.less"; "~uikit/themes/@{base}/comment.less"; // Navs "~uikit/themes/@{base}/nav.less"; "~uikit/themes/@{base}/navbar.less"; "~uikit/themes/@{base}/subnav.less"; "~uikit/themes/@{base}/breadcrumb.less"; "~uikit/themes/@{base}/pagination.less"; "~uikit/themes/@{base}/tab.less"; "~uikit/themes/@{base}/thumbnav.less"; // Elements "~uikit/themes/@{base}/list.less"; "~uikit/themes/@{base}/description-list.less"; "~uikit/themes/@{base}/table.less"; "~uikit/themes/@{base}/form.less"; // Common "~uikit/themes/@{base}/button.less"; "~uikit/themes/@{base}/icon.less"; "~uikit/themes/@{base}/close.less"; "~uikit/themes/@{base}/badge.less"; "~uikit/themes/@{base}/alert.less"; "~uikit/themes/@{base}/thumbnail.less"; "~uikit/themes/@{base}/overlay.less"; "~uikit/themes/@{base}/column.less"; // JavaScript "~uikit/themes/@{base}/dropdown.less"; "~uikit/themes/@{base}/modal.less"; "~uikit/themes/@{base}/offcanvas.less"; // Need to be loaded last "~uikit/themes/@{base}/text.less"; "~uikit/themes/@{base}/utility.less"; "~uikit/themes/@{base}/contrast.less";
Now you can re-use variables and mixins from uikit in your own code!