How to use css modules

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]

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
  }
}

[pedronauck]

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

@S-unya @bastienGranger