atomic-loader's Introduction

atomic-loader

Webpack loader for compiling atomic css

Install

$ npm install atomic-loader --save

Usage

In your webpack config:

find the babel-loader or jsx-loader setting
insert the atomic-loader before it
example

loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loader: 'atomic-loader?configPath=./atomicCssConfig.js!babel-loader',
        }
    ]

or you can just not giving atomic css config file, it will use default css dest: ./build/css/atomic.css

atomCssConfig.js example which specified in configPath

module.exports = {
    cssDest: './main.css',
    options: {
        namespace: '#atomic',
    },
    configs: {
        breakPoints: {
            sm: '@media screen(min-width=750px)',
            md: '@media(min-width=1000px)',
            lg: '@media(min-width=1200px)'
        },
        custom: {
            '1': '1px solid #000',
        },
        classNames: []
    }
}

The configurable parameter can be found at https://github.com/yahoo/atomizer . Only the cssDest is extra parameter for telling atomic-loader where to output css file.

Recommend Projects