Docz: How to use css modules

[bastienGranger]

Is there a way to use css modules with docz?

Description
I'm using css modules with the webpack loader css-loader

here is a component for an exemple

import * as React from 'react'
import classNames from 'classnames'

const styles = require('./styles.css')

interface State {
  isFocused: boolean
}

export default class TextField extends React.Component<{}, State> {
  public constructor(props: {}) {
    super(props)

    this.state = {
      isFocused: false
    }
  }

  private onFocus = () => {
    this.setState({ isFocused: true })
  }

  private onBlur = () => {
    this.setState({ isFocused: false })
  }

  public render() {
    return <div className={styles.container}>
      <input className={styles.input}
        onFocus={this.onFocus}
        onBlur={this.onBlur} />
      <label className={classNames(styles.label, this.state.isFocused ? styles.labelFocus : {})}>label</label>
    </div >
  }
}

and my very simple mdx file

name: TextField
---

import {Playground } from 'docz'
import TextField from './'

# TextField

<Playground>
  <TextField />
</Playground>

when I start docz dev server, I have this error message

 ERROR  Failed to compile with 1 errors                                                                       09:39:00

 error  in ./src/libs/text-field/text.mdx

Module build failed (from ./node_modules/@mdx-js/loader/index.js):
Error: ENOENT: no such file or directory, open '/Users/bgranger/htdocs/perso/pocs/docz/src/libs/text-field/text.mdx'

 @ ./.docz/app/imports.js 9:11-123
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

I assume that the css loader is not used with the bundler.

I have two questions:

• is it possible to use css modules?
• if not is it possible to use custom bundler/bundler config?

[pedronauck]

You can set your own bundler config by passing on doczrc.js:

// doczrc.js
export default {
  modifyBundlerConfig: (config) => {
    /* logic here */
    return config
  }
}

More info on issue #6

[S-unya]

@pedronauck I setup a sass-loader in the doczrc.js but when it came to loading a css-module (albeit in scss), I recieved the error that 'local module MySCSSModule.scsscould not be resolved'. The import wasimport * as styles from "./MySCSSModule.scss"`. This seems like the loader isn't properly configured.

I added my config by pushing to the config.modul.rules array; I'm assuming that this is the WRONG way and that I didn't configure properly, but the docs are particularly sparse on this detail. Is it possible to have an example of adding config here please?

[pedronauck]

Try to make your config like that @S-unya:

// doczrc.js
export default {
  modifyBundlerConfig: (config) => {
    config.resolve.extensions.push('.scss')
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"]
    })

    return config
  }
}

[S-unya]

Thanks!

[pedronauck]

After released v0.2.11 you can use docz-plugin-css to configure your CSS just by adding a plugin ✌️

@S-unya @bastienGranger

[S-unya]

Nice work. Thanks.