kss-loader

Webpack loader for kss-node

Installation

Install the plugin with npm:

npm install kss-loader --save-dev

Usage

Within your webpack configuration, you'll need to add the kss-loader to the list of modules.

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.scss$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'kss-loader',
        options: {
          title: 'KSS Example',
          mask: '*.scss|*.css',
          placeholder: '[modifier class]',
          source: './scss/',
          destination: './docs/',
          homepage: './../README.md'
        }
      }
    }]
  }
  // ...
}

Options

Name	Default	Type	Description
source		string	Source directory to recursively parse for KSS comments,homepage, and markup (relative to webpack.config.js file)
destination	"styleguide"	string	Destination directory of style guide (relative to webpack.config.js file)
mask	"*.css|*.less|*.sass|*.scss|*.styl|*.stylus"	string	Use a mask for detecting files containing KSS comments
config		string	Load the kss options from a json file
builder	"builder/handlebars"	string	Use the specified builder when building your style guide
css		array	URL of a CSS file to include in the style guide (relative to the generated style guide)
js		array	URL of a JavaScript file to include in the style guide (relative to the generated style guide)
custom		string	Process a custom property name when parsing KSS comments
extend		string	Location of modules to extend the templating system; see http://bit.ly/kss-wiki
homepage	"homepage.md"	string	File name of the homepage's Markdown file (relative to source)
markup	false	boolean	Render "markup" templates to HTML with the placeholder text
placeholder	"[modifier class]"	string	Placeholder text to use for modifier classes
nav-depth	3	number	Limit the navigation to the depth specified
title	"KSS Style Guide"	string	Title of the style guide

For more options, see kss-node cli options.

Example

Check out the example directory for a simple KSS style guide example.