How to extend default webpack configuration?

[Jmlevick]

So, I've just found out about this project and it seems pretty interesting. However, also recently I found out about https://tailwindcss.com/ and I was wondering about how can I mix the two together? I mean, while reading about #162 I discovered a method of doing a little bit of handling on the webpack configuration and I was wondering if maybe the installation steps for tailwind on webpack could be applicable for a roc project (I think so!); I've read:

https://tailwindcss.com/docs/installation

and checked out the code on:

https://github.com/tailwindcss/webpack-starter

and so far what I have is something like the following:

https://gist.github.com/Jmlevick/2a52d491877b40afa776d5b86254d4b3

But it fails with:

TypeError: arguments[i].apply is not a function

I've tried with other approaches to no avail, any ideas?

[Jmlevick]

Solved this particular issue with a gulp task. Maybe not the best way to do it but it works for me, code below:

https://gist.github.com/Jmlevick/419c772e69d25ac720a62af60ed3b12e

[dlmr]

Hi, sorry for not answering sooner!

Looks like the problem you had was because you converted the Webpack config to JSON when it needs to be JavaScript; const currentConf = JSON.parse(JSON.stringify(webpackConfig));.

project: {
    actions: [{
      hook: 'build-webpack',
      action: () => () => (webpackConfig) => {
        webpackConfig.plugins.push(tailwindcss('./tailwind.js'));
        return webpackConfig;
      },
    }],
  },

This might work.

You can also modify the Webpack configuration under the webpack property where it will be automatically merged with the existing configuration.

// roc.config.js
module.exports = {

    webpack: () => {
        const tailwindcss = require('tailwindcss');
        return {
            plugins: [
                tailwindcss('./path/to/your/tailwind-config.js'),
            ],
        };
    }
};

Great hat you found a solution that works for you!