Search code examples
cssreactjswebpacksasscreate-react-app

CSS classnames are being interpreted in a different order in production/development

I'm using create-react-app v2.

I have a component with several classnames: "x15 x14 login-form__field". In the HTML they are the same order in both environments.

In the production build, '.x14' appears in a higher priority than 'login-form__field'. They are reversed (and correct) in development. Any ideas? I know webpack does some hoisting and post-processing, but not sure why this would affect it.

Dev & Prod class order

DevelopmentProduction

Cheers

-- Update --

I've just noticed that the custom class is being loaded in as an inline style, which is why it gets priority. I assume webpack is doing this. Is there anyway we can tell webpack/CRA to load styles as stylesheets - not inline. Otherwise it means the styles are not representative of production.

-- Second Update --

Create-react-app uses 'styleLoader' for inline-styles in dev for hot reloading and generates CSS for production only. This makes sense.

Solution

  • Create-react-app uses 'styleLoader' for inline-styles in dev for hot reloading and generates CSS for production only.