https://github.com/design4pro/kss-loader
DEPRECATED. Webpack loader for https://github.com/kss-node/kss-node
https://github.com/design4pro/kss-loader
kss kss-loader kss-node webpack-loader webpack2
Last synced: 5 months ago
JSON representation
DEPRECATED. Webpack loader for https://github.com/kss-node/kss-node
- Host: GitHub
- URL: https://github.com/design4pro/kss-loader
- Owner: design4pro
- License: mit
- Archived: true
- Created: 2017-05-20T15:29:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-29T06:51:30.000Z (over 7 years ago)
- Last Synced: 2025-01-14T01:44:35.478Z (5 months ago)
- Topics: kss, kss-loader, kss-node, webpack-loader, webpack2
- Language: JavaScript
- Homepage:
- Size: 55.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# kss-loader
[](https://travis-ci.org/design4pro/kss-loader) [](https://circleci.com/gh/design4pro/kss-loader) [](https://codecov.io/gh/design4pro/kss-loader) [](https://www.npmjs.com/package/kss-loader) [](https://www.npmjs.com/package/kss-loader) [](https://greenkeeper.io/)
> Webpack loader for [kss-node](https://github.com/kss-node/kss-node)
## Installation
Install the plugin with npm:
```shell
npm install kss-loader --save-dev
```
## Usage
Within your webpack configuration, you'll need to add the kss-loader to the list of modules.
```javascript
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](https://github.com/kss-node/kss-node#using-the-command-line-tool).
## Example
Check out the [example](https://github.com/design4pro/kss-loader/blob/master/example/kss/) directory for a simple KSS style guide example.