isomorphic-style-loader is having no effect in my gatsby project
hugonteifeh opened this issue · comments
Hugo Nteifeh commented
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 commented
How did you resolve this problem?