isomorphic-style-loader is having no effect in my gatsby project

[hugonteifeh]

I'm using ant design in a gatsby project and I extend the webpack config to customize the ant design themes using the following code snippets:

    // webpack.config.js
    module.exports = {
      rules: [{
        test: /\.less$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader', // translates CSS into CommonJS
        }, {
          loader: 'less-loader', // compiles Less to CSS
    +     options: {
    +       modifyVars: {
    +         'primary-color': '#1DA57A',
    +         'link-color': '#1DA57A',
    +         'border-radius-base': '2px',
    +         // or
    +         'hack': `true; @import "your-less-file-path.less";`, // Override with less file
    +       },
    +       javascriptEnabled: true,
    +     },
        }],
        // ...other rules
      }],
      // ...other config
    }

This works fine when running 'gatsby develop', but throws the following error when running 'gatsby build':

"window" is not available during server side rendering.

    See our docs page for more info on this error: https://gatsby.dev/debug-html

      21 |  // to operate correctly into non-standard environments
      22 |  // @see https://github.com/webpack-contrib/style-loader/issues/177
    > 23 |  return window && document && document.all && !window.atob;
         | ^
      24 | });
      25 | 
      26 | var getTarget = function (target, parent) {

WebpackError: ReferenceError: window is not defined

I tried to exchange style loader with 'isomorphic'style-loader' which throws NO error when runnning 'gatsby build' but then the style is not injected into the dom at all when running 'gatsby develop'.

[Pines-Cheng]

How did you resolve this problem?