CSS modules not styling my app when deployed to Firebase. Create React App

Question

I changed the webpack.config.dev.js and webpack.config.prod.js both in the config folder and in node_modules/react-scripts/config folder to allow for CSS modules like this:

test: /\.css$/,
loader: ExtractTextPlugin.extract(
  Object.assign(
    {
      fallback: require.resolve('style-loader'),
      use: [
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
                        modules: true,
                        localIdentName: '[name]__[local]__[hash:base64:5]'

When I run my app in dev mode with npm start it works just fine and the CSS modules apply correctly.

However, when I build my app and deploy it to Firebase the CSS styling disappears.

Is this a common issue? How can I solve it?

Please read this answer: https://stackoverflow.com/a/51128749/5007662 — giraffesyo, Oct 18 '18 at 18:19

score 1 · Accepted Answer · answered Oct 18 '18 at 18:01

If you upgrade to react-scripts version 2 you don't need to eject in order to make this work. The build will automatically work with css modules. I would recommend upgrading your react-scripts to v2 using yarn upgrade react-scripts@latest

Then rerun yarn build and see if the deploy works properly. You won't need to modify your webpack configuration for this.

CSS modules not styling my app when deployed to Firebase. Create React App

1 Answers1