Server-side-rendered styles differ from the ones used during development #3741
Comments
|
The order of server rendered styles are determined by how you add styles to your html.js. This is a tricky issue since in development, styles are added by JS in the client, and in SSR, they're added by plugins / either the default or your custom html.js component. There's not a simple way to solve this. Ideally you use only one technology for injecting CSS e.g. use emotion as well to inject the normalize.css file. |
|
Actually, I just tried switching to emotion-only injects by using the following code inside exports.modifyWebpackConfig = ({ config, stage }) => {
if (stage === 'develop' || stage === 'build-css') {
config.loader('css', current => ({
...current,
loader: 'raw',
}));
}
return config;
};Now, |
|
@KyleAMathews I tried to tweak my
exports.modifyWebpackConfig = ({ config, stage }) => {
if (stage === 'develop' || stage === 'build-javascript') {
// Load only the raw contents of regular CSS files to support CSS-in-JS
config.loader('css', ({ loaders, ...current }) => ({
...current,
loader: 'raw',
}));
} else if (stage === 'build-css') {
// Regular CSS files shall not be processed in this stage anymore
config.loader('css', ({ loaders, ...current }) => ({
...current,
loader: 'null',
}));
}
return config;
};
import { injectGlobal } from 'react-emotion';
import normalizeCSS from 'normalize.css';
injectGlobal`${normalizeCSS}`;
console.log(normalizeCSS); // Works fine during development and production
injectGlobal`
body {
box-sizing: border-box;
font-family: Montserrat, sans-serif;
overflow-x: hidden;
}
/* ... */
`;I would appreciate if you could explain what I'm not taking into consideration... |
|
Import the css like this:
That way you'll stop also loading the CSS through the normal css loader. |
|
@KyleAMathews Unfortunately, that doesn't work because it sets I don't want it to be converted to a file with |
|
@kripod probably need to import an actual css file then |
|
or there's something goofy with our raw loader setup because it should just give you the actual text of the file. |
|
@KyleAMathews It seems that the |
|
Oh my bad. You need to add an exclamation mark as well at the start to disable the normal loader chain. I just tested this in a new project and it imported the raw css string as expected: import React from "react"
import normalizeCSS from "!raw-loader!normalize.css"
console.log(normalizeCSS)
export default () => <div>Hello world!</div> |
|
@KyleAMathews Awesome, and I don't even need a |
|
While this works for me, I do get an eslint error: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
When I import
normalize.cssand then use theinjectGlobalfunction ofreact-emotion, then I get inconsistent results between development and production builds.Environment
Gatsby version: 1.9.165
Node.js version: 8.9.3
Operating System: Windows 10 x64
File contents (if changed):
gatsby-config.js:pages/index.jsx:Actual result
In production mode, the styles defined in the
injectGlobalmethod are overrided by the styles ofnormalize.css. (Development mode works as expected.)Expected behavior
The injection of styles should always happen in the order of their definition.
The text was updated successfully, but these errors were encountered: