Atomizer

webpack

A simple guide to setup Atomizer with webpack.

On this page

Install the package

We offer two options for integrating with webpack, a loader and a plugin.

Loader

webpack-atomizer-loader is a webpack loader that can parse your source code for Atomizer classes and generate a CSS file.

First install the loader in your project.

npm i webpack-atomizer-loader -D

Then configure your ./webpack.config.js file like so.

import { resolve } from 'path';
import autoprefixer from 'autoprefixer';

export default {
    // ...
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'webpack-atomizer-loader',
                        options: {
                            configPath: resolve('./atomCssConfig.js'),
                            minimize: true,
                            postcssPlugins: [autoprefixer],
                        },
                    },
                ],
            }
        ],
    },
}

You can fine more detailed configuration information is available in the project repository.

Plugin

Leverage our atomizer-plugins package to integrate our webpack plugin in your project.

First install the dependency in your project.

npm i atomizer-plugins -D

Then configure your ./webpack.config.js file like so.

import { webpack } from 'atomizer-plugins';

const atomizer = webpack({
    /* options */
    config: atomizerConfig,
    outfile: 'dist/atomizer.css',
});

export default {
    // ... webpack config
    plugins: [atomizer],
};

Configuration information and examples are available in the atomizer-plugins repository.

Start your build process

Run your build setup as configured in your project’s ./package.json.

npm run dev

Begin using Atomizer

Add the generated Atomizer CSS to your template, then start adding Atomizer classes to your markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/dist/atomizer.css" />
    </head>
    <body>
        <h1 class="Fw(b) Fz(2rem)">Welcome!</h1>
    </body>
</html>