UnoCSS Preset Installation - Webpack.js

Install the Inkline Preset for UnoCSS in any Webpack.js application.


1 Install dependencies
npm install -D unocss @unocss/webpack @inkline/unocss
2 Create Configuration File

Create a uno.config.ts file and add the Inkline preset to it.

import { defineConfig } from 'unocss';
import { createPreset } from '@inkline/unocss';

export default (async () => {
    const presetInkline = await createPreset();

    return defineConfig({
        presets: [presetInkline]
3 Add UnoCSS to your Webpack.js Configuration

Next, open your webpack.config.ts file and add the following to the plugins array:

const inkline = require('@inkline/plugin/webpack');
const unocss = require('@unocss/webpack').default;

module.exports = {
    plugins: [
    optimization: {
        realContentHash: true
4 Replace utilities import

If existing, replace the utilities.scss import from your main.ts file with the uno.css import.

- import '@inkline/inkline/css/utilities.scss?inline';
+ import 'uno.css';
5 Enjoy on-demand utility classes!

That's it! You can now enjoy to ease and efficiency of on-demand utility classes in your Inkline project.

Read more about the UnoCSS Preset