Closed kristinn93 closed 7 years ago
You have to have loaders setup for .css
files.
Yeah, style-loader, css-loader, postcss-loader and postcsssModulesValues
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 notifications@github.com 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 https://github.com/KyleAMathews/react-spinkit/issues/56#issuecomment-299529157, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEVh3_t2EXLkWGtz03SzSLLVpdXM0rbks5r2189gaJpZM4NRyXH .
I think it has something to do with CSS modules
@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 ✌️
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.
Documentation states:
I had to import the css from react-spinkit to get it working
And in the style.css I had to center the loading spinner
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",