私は、https://github.com/ayroblu/ssr-create-react-app-v2と同様のセットアップを sass 前処理とともに使用しています。
現在、スタイルは ignore-styles パッケージを使用してサーバー側で無視されています -
// 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'
]
});
ただし、コンポーネントでは、次のようなコードを使用しています -
import style from './style.scss';
<div className={cx('align-center', style['center'])}></div>
スタイル変数を介して参照されるクラス名は、(スタイルを無視するため) サーバー側ではレンダリングされませんが、フロントエンドでは正常に機能します。
サーバー側のレンダリングを壊すことなく、クラス名が完全に機能するようにするにはどうすればよいでしょうか?