Repository files navigation

Docz plugin to parse css files inside your documents

• PostCSS
• Less
• Sass
• Stylus

First of all, install plugin:

$ yarn add docz-plugin-css --dev

After that, use the plugin on yourdoczrc.js:

// doczrc.jsimport{css}from'docz-plugin-css'exportdefault{plugins:[css({preprocessor:'postcss',cssmodules:true,loaderOpts:{/* whatever your preprocessor loader accept */}})]}

Do you can choose how preprocessor your bundler will use just by changing thepreprocessor property at the plugin definition:

// doczrc.jsimport{css}from'docz-plugin-css'exportdefault{plugins:[css({preprocessor:'sass'})]}

To use css modules, just turn oncssmodules property on your project configuration:

// doczrc.jsimport{css}from'docz-plugin-css'exportdefault{plugins:[css({preprocessor:'sass',cssmodules:true})]}

After that, to import styles from css modules, just use.module.{preprocessor-ext} on your files

---name:Button----import { Playground } from 'docz'import { Button } from './Button'import { styles } from './styles.module.css'# ButtonExample of Button component with custom class!<Playground><Button className={styles.custom}>Click me</Button></Playground>

If you don't pass.module in front of the preprocessor extension, bundler will don't parse your css as cssmodule!

If in your project some places use both CSS modules and some place doesn't, you can leave out thecssmodules option so thatwebpack can determined by itself the correct way to load the CSS.

You can still use multiple pre-processor together in the same configuration:

// doczrc.jsimport{css}from'docz-plugin-css'exportdefault{plugins:[css({preprocessor:'sass'}),css({preprocessor:'stylus'}),]}

• Type:postcss | sass | less | stylus
• Default:postcss

Use to define the preprocessor you want to use

• Type:Boolean
• Default:false

Use this option if you want to use css modules

• Type:{ [key:string]: any }
• Default:{}

Custom options passed on pre-processor loader configuration

• Type:{ [key:string]: any }
• Default:{}

Custom options passed oncss-loader configuration

• Type:{ [key:string]: any }
• Default:{}

Custom options passed on webpack rule configuration