Docz: How to compile React Component with less or css?

[YardWill]

How to compile React Component with less or css? Our UI Library in private npm registry just compiled to es5 and we didn't compile less(We compiled less in our business project with webpack).

[pedronauck]

You can modify your bundler config and put less, sass or css modules loaders at rules... I didn't have much time, but my idea is create something like docz-plugin-less, docz-plugin-sass, docz-plugin-cssmodules in the near future...

But if you want to modify your bundler config, just use the modifyBundlerConfig on doczrc.js:

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

[renatorib]

@YardWill

You need to put the loader of sass or less.
Here is an example using sass:

// doczrc.js

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

    return config
  }
}

yarn add style-loader css-loader sass-loader --dev

Read more here: https://github.com/webpack-contrib/sass-loader

[pedronauck]

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

@YardWill