How to compile React Component with less or css?

[doczjs]

How to compile React Component with less or css?

[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

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