next.config with 'withCss' and electron-renderer

[DominykasZaksas]

Hey,

On my other next.js project I have a config ` // next.config.js const withCSS = require('@zeit/next-css');

module.exports = withCSS({ webpack: function (config) { config.module.rules.push({ test: /.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/, use: { loader: 'url-loader', options: { limit: 100000, name: '[name].[ext]' } } }); return config } } ); `

and in Nextron we have this module.exports = { webpack: (config) => Object.assign(config, { target: 'electron-renderer', }), };

Question - how to combine them?

I tried multiple ways of setting config but without much success.

As a side note, I am trying to add support for Semantic UI where one of the steps requires import 'semantic-ui-css/semantic.min.css'

Cheers!

[saltyshiomix]

Hi @DominykasZaksas , thank you for trying nextron!

From the conclusion, in the renderer process we can use next.config.js as the same way of NEXT.js.

You can use your other NEXT.js projects' next.config.js in the nextron's renderer directory directly like this:

const withCss = require('@zeit/next-css');

module.exports = withCss({
  webpack: (config, { isServer }) => {
    config.target = 'electron-renderer';

    // override config here (e.g. `url-loader` you mentioned)

    if (isServer) {
      // if you need to handle NEXT.js' server webpack process, configure it here
    }

    return config;
  },
});

Currently there is a similar example with-javascript-ant-design, which imports css directly here:

https://github.com/saltyshiomix/nextron/blob/master/examples/with-javascript-ant-design/renderer/pages/home.jsx#L15

Thanks in advance!

[saltyshiomix]

If you have any troubles, I'll add some examples, feel free to issue me up 👍