KyleAMathews / react-spinkit

A collection of loading indicators animated with CSS for React
http://kyleamathews.github.io/react-spinkit/
MIT License
1.49k stars 73 forks source link

Not working if using custom CSS loaders configuration within webpack.config.js #34

Closed lropero closed 8 years ago

lropero commented 8 years ago

I'm using the following loaders configuration for CSS files:

loaders: [
    'style',
    'css?importLoaders=1&localIdentName=[name]__[local]__[hash:10]&modules',
    'postcss'
]

The thing is that react-spinkit loads CSS files as well but only works with the following loader:

loaders: [
    'style',
    'css'
]

Is there a way to overcome this? Maybe there's some Webpack magic that I'm not aware of that can fix this. Or maybe it would be better if react-spinkit loads an already built .js with the CSS files that needs within, instead of having the local Webpack handle CSS loading when builing the project.

lropero commented 8 years ago

Ok, I've found a work-around for this. Use two different loaders configuration for the same test pattern, setting a different "include" path for each:

{
    test: /\.css$/,
    include: /node_modules/,
    loaders: [
        'style',
        'css'
    ]
},
{
    test: /\.css$/,
    include: /src/,
    loaders: [
        'style',
        'css?importLoaders=1&localIdentName=[name]__[local]__[hash:10]&modules',
        'postcss'
    ]
}
KyleAMathews commented 8 years ago

If you enable "cssmodules" support then all normal css stops working. This looks like a good workaround for that problem.

bradennapier commented 7 years ago

This does not appear to work with webpack 2 as far as I can tell. I am getting "cannot read property fn of undefined"