Add normalize.css to reactjs

Question

This might be a basic question but I'm really new to react and webpack. How do I go about adding normalize.css and css frameworks? I don't want to use bootstrap, instead I found a lightweight css framework called concise css. I'd like to use this since i'm mainly after the positioning and formatting of my elements and have more flexibility with my styles.

I've already installed css-loader and styles-loader. I've read you can load styles to components by using

require("./path/to/css")

However, i'm still really confused by this.

Answer 1

You can put your require("./path/to/css") inside of your index.js or any other top-level React component. It will get bundled in your web pack for all child components from there.

Make sure you have your loaders installed in your package.json file and youur webpack.config.js file calls the loaders. A barebones webpack.config.js file that accomplishes this might look like:

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}