How to use normalize.css using npm install with webpack?

Question

I am using webpack with ReactJS and trying to figure out how to using normalize.css after npm installing it (https://necolas.github.io/normalize.css/).

Is the normalize

Answer 1

You can use the npm-installed normalize.css in the following way with React:

import React from 'react';
import ReactDOM from 'react-dom';

import 'normalize.css'; // Note this

const root = document.getElementById('root');

ReactDOM.render(
Hello, World!
, root);

The result will be:

Notice that the text has been styled by normalize.css.

To get it working, you need something similar to the following setup:

---

1) Add the Javascript from above to index.js

2) Add normalize.css (and friends) to package.json:

{
    "dependencies": {
        "normalize.css": "^5.0.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2"
    },
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.11",
        "style-loader": "^0.21.0",
        "webpack-dev-server": "^3.1.4",
        "webpack": "^4.8.3"
    }
}

3) Use the correct loaders in webpack.config.js:

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                options: { presets: ['env', 'react'] }
            },
            {
                test: /\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            }
        ]
    }
};

4) Add an index.html file to see the results:

4) Install everything

npm install

5) Start the Webpack devserver:

./node_modules/.bin/webpack-dev-server --open

---

NOTE: I am using version 5.0.0 of normalize.css. If you use version 6.0.0 or higher, the font will be different. All the opinionated rules were removed from normalize.css in that version.

---

Update 17/5/2018: Updated to use Webpack 4 and React 16.