How to setup babel-plugin-react-css-modules in create-react-app?

Question

I really like the separation of className and styleName that babel-plugin-react-css-modules offers for global and local styles respectively, but have had some trouble getting the plugin to work with create-react-app.

I've tried installing the plugin by running

npm install babel-plugin-react-css-modules --save

... as it says to do in the project (github https://github.com/gajus/babel-plugin-react-css-modules#css-modules) ...

... and have also used craco as suggested in a similar thread (#5113) to help overcome the limitations of create-react-app without the need to eject, but am still unable to import a scss file and reference to it using styleName.

Does anyone know if I'm missing something else here? Sorry if it's a noob question, I'm new to React and have been looking for a solution to this for a while now.

"still unable to import a scss file and reference to it using styleName" babel-plugin-react-css-modules is for normal css modules (style.module.css) not for an scss file, right? — Asim K T
– Asim K T, Commented Jul 28, 2020 at 8:35

LancerAce · Accepted Answer · 2019-08-04 18:40:37Z

4

1. add the plugin to .babelrc first.

  "plugins": [
      ["babel-plugin-react-css-modules",
      {
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true
      }],.... 
  ]

2. add css rule in webpack.config.js.

below is my configuration that you can reference from.

make sure that

2.1 option modules set to true.

2.2 localIdentName follow this format. localIdentName: "[path]___[name]__[local]___[hash:base64:5]"

 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: { cacheDirectory: true }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: ExtractCssChunks.loader,
            options: { hot: true }
          },
          {
            loader: "css-loader", //generating unique classname
            options: {
              importLoaders: 1, // if specifying more loaders
              modules: true,
              sourceMap: false,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]" //babel-plugin-css-module format
              //localIdentName: "[path][name]__[local]" //recommended settings by cssloader#local-scope , this option generate unique classname for compiled css
            }
          }
        ]
      },

answered Aug 4, 2019 at 18:40

LancerAce

745 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Weardian Over a year ago

thanks @LancerAce, I've moved to using aphrodite now for css in js, but hopefully this will help anyone else who still wants to use babel-plugin-react-css-modules

chenop Over a year ago

"babel-plugin-react-css-modules" or "react-css-modules"? according to the README its the latest

Collectives™ on Stack Overflow

How to setup babel-plugin-react-css-modules in create-react-app?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related