Style Loader

[ajhool]

Any interest in adding a css style loader to webpack by default? I believe the dependency is:

npm install --save-dev css-loader

With the most basic rule added to webpack.config.js :

      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }

[ajhool]

Actually, the above code was only working in storybook, but it seems to be a far more complicated task to properly import css and scss into the isomorphic framework. CSS import seems to be a bleeding edge issue and I haven't found a successful configuration for this framework yet. Has anybody else had luck?

[mininternet]

I installed the following dependencies, and then added them to webpack.config.js -

      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!resolve-url-loader!sass-loader?sourceMap'
      }

And in the component files, i use ES5 requires, to import the scss file.

[mrsteele]

FYI this is exclusively an issue with the server aspect of getting the stylesheet.

I sort of ran into this problem as well, and was able to get it working by doing the following:

if (typeof window === 'object') {
  require('./styles.css')
}

But as you probably know, that means server-side rendering wont happen. My pages had a brief period where no styles were displayed, and then they showed up after initial load.

Back to the drawing board!

[protoEvangelion]

@ajhool Do you mean adding css modules functionality along with styled-components?

Also, I'm not too certain if this will have an impact, but it looks like the react-router v4 pull is going to be merged soon, so the way you hook this up to server rendering may change as well.

[EricWVGG]

I am attempting to load the CSS for the https://github.com/davidchin/react-input-range component. I have followed @mininternet’s suggestion to install dependencies and add to the webpack, but I am unsure whether this belongs in the babel set, the assets set, or …?

Either way, I get this message:

ERROR in ./~/react-input-range/lib/css/index.css
Module parse failed: /Users/username/sites/myProject/node_modules/react-input-range/lib/css/index.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .input-range__slider { // more CSS follows

Any advice would be greatly appreciated.

[mininternet]

This sounds to me like an issue with that particular package, rather than the webpack loaders.

[EricWVGG]

I can't rule that out, but I also still don't know whether these webpack rules go in Babel, Assets, something else, and I have had no luck with other components to boot.

[mininternet]

@EricWVGG - they go in webpackconfig.js. I've updated my comment above to reflect that. But this is really more a webpack configuration issue rather than anything to do specifically with ARc.

[EricWVGG]

"I have followed @mininternet’s suggestion to install dependencies and add to the webpack, but I am unsure whether this belongs in the babel set, the assets set"

const babel = () => () => ({
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
    ],
  },
})

const assets = () => () => ({
  module: {
    rules: [
      { test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/, loader: 'url-loader?limit=8000' },
    ],
  },
})

[sasajib]

Successfully able to add like this,

npm install --save-dev style-loader css-loader sass-loader node-sass or yarn add -D style-loader css-loader sass-loader node-sass

in webpack.config.js file edit

const assets = () => () => ({
  module: {
    rules: [
      {test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']},
      { test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/, loader: 'url-loader?limit=8000' }
    ],
  },
})

hope this help others, thx and keep up the good work

[pgrekovich]

@sasajib but it's will not work with isomorphic app