Spinner not showing up unless importing css

[kristinn93]

Documentation states:

CSS is loaded automatically when using Webpack with the css-loader and style-loader, or Browserify/CSSify to build your project.

I had to import the css from react-spinkit to get it working

import React from 'react';
import Spinner from 'react-spinkit';
//eslint-disable-next-line
import '!style-loader!css-loader!react-spinkit/css/three-bounce.css';
import style from './style.css';

function LoadingSpinner() {
  return <Spinner className={style.loading} spinnerName="three-bounce" noFadeIn />;
}

export default LoadingSpinner;

And in the style.css I had to center the loading spinner

.loading {
  text-align: center;
}

How does one get webpack to automatically import the css ?

Node: 7.7.3
Chrome
"react": "15.5.4",
"react-spinkit": "^2.1.1",
"webpack": "^2.2.0",

[KyleAMathews]

You have to have loaders setup for .css files.

[kristinn93]

Yeah, style-loader, css-loader, postcss-loader and postcsssModulesValues

[KyleAMathews]

You need to be able to require CSS without adding the loaders to the require string

…

On Fri, May 5, 2017, 10:41 AM Kristinn ***@***.***> wrote: Yeah, style-loader, css-loader, postcss-loader and postcsssModulesValues — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#56 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEVh3_t2EXLkWGtz03SzSLLVpdXM0rbks5r2189gaJpZM4NRyXH> .

[Bnaya]

I think it has something to do with CSS modules

[kristinn93]

@Bnaya Correct, the problem is with CSS modules.

The solution is in issue #34 comment from @lropero

I'm using webpack 2.

My dev setup

module: {
    rules: [
      {
        test: /\.css$/,
        include: /node_modules/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.css$/,
        include: /src/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            query: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
          },
        ],
      },
    ],
  },

My production setup with ExtractTextPlugin

module: {
    rules: [
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader?importLoaders=1&modules=false', 'postcss-loader'],
        }),
      },
      {
        test: /\.css$/,
        include: /src/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader?importLoaders=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
            'postcss-loader',
          ],
        }),
      },
    ],
  },

@KyleAMathews Might be worth mentioning in readme. Awesome project btw ✌️

[ericblade]

I would like to point out that for those of us using a premade development environment that does not give us direct access to modify the configuration... the solution in OP actually works pretty well. I'm using an environment that uses modules, and I don't want to go digging around inside it to try and figure out how to modify the webpack config, without also breaking the css module support.

So, I've created a container component for the Spinner that uses the above import '!...' line and renders a Spinner.