CSS Modules not working with 3rd party package react-spinkit

Question

I am trying to utilize the react-spinkit package for my React.js web application. Within this application I have opted to use CSS modules. When I made the switch to CSS modules, I noticed that the spinner component that I created was not rendering. I am sure this has to do with the fact that I am now using CSS modules. Currently my webpack.config.js file looks something like this:

module.exports = {
   //other configurations...
   module: {
       rules: [
           {
               test: /\.(js|jsx)$/,
               exclude: /node_modules/,
               use: 'babel-loader'
           },
           {
               test: /\.css$/,
               loader: 'style-loader!css-loader? modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
           }
       ]
   }
}

I believe that I need to set a rule for regular css to be compiled by the css-loader. However, I am not aware of how to combine a rule so that the css-loader can use both css modules and regular css. Any help would be appreciated.

score 0 · Answer 1 · answered Oct 03 '18 at 23:08

try having your config look like this in that section:

rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]

CSS Modules not working with 3rd party package react-spinkit

1 Answers1