I am using a setup similar to - https://github.com/ayroblu/ssr-create-react-app-v2 along with sass preprocessing.
Now, styles have been ignored at the server side using the ignore-styles package -
// Ignore those pesky styles
require('ignore-styles');
// require('babel-polyfill');
// Set up babel to do its thing... env for the latest toys, react-app
for CRA
require('babel-register')({
ignore: /\/(build|node_modules)\//,
presets: ['env', 'react-app'],
plugins: [
'syntax-dynamic-import',
'dynamic-import-node',
'react-loadable/babel'
]
});
However, in components wherever we have used code similar to -
import style from './style.scss';
<div className={cx('align-center', style['center'])}></div>
The class names referenced through the style variable are not rendered at the server side(because of ignore-styles) but work fine on the frontend.
How do we make sure that the class names work perfectly without breaking the server side rendering?
