davecranwell/kss-webpack-plugin

Generate KSS styleguide from Webpack

KSS Webpack plugin

Installation

Install the plugin with npm:

$ npm install kss kss-webpack-plugin --save-dev

Basic Usage

The plugin will generate a KSS styleguide using kss-node.

var KssWebpackPlugin = require('kss-webpack-plugin');
var KssConfig = {
  source: 'path/to/css_or_scss'
};
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new KssWebpackPlugin(KssConfig)]
};

For more options, see kss-node cli options

Custom template

You can generate a copy of the demo style guide like so:

$ kss demo

Then pass the path to the template in the KssConfig object like this

var KssWebpackPlugin = require('kss-webpack-plugin');
var KssConfig = {
  source: 'path/to/css_or_scss',
  builder: 'path/to/template'
};
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new KssWebpackPlugin(KssConfig)]
};