Package Exports

webpack-atomizer-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-atomizer-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

webpack-atomizer-loader

Webpack loader for compiling atomic css

Install

$ npm install webpack-atomizer-loader --save-dev

Usage

In your webpack config:

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

loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loader: 'webpack-atomizer-loader?configPath=' + __dirname + '/atomCssConfig.js!babel-loader',
        }
    ]

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: []
    }
}

To assign the output destination, the extra parameter cssDest in atomic's config should be set, if bypass configPath, the default cssDest is ./build/css/atomic.css.

Please visit acss-io/atomizer for more information.