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.