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

javascript html css npm webpack

70,937

Solution 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(<h1>Hello, World!</h1>, 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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="root"></div>
  <script src="main.js"></script>
</body>
</html>

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.

Solution 2

Adding: If you are using WebPack 4 and you cannot import normalize.less, try normalize.css.

@import "../node_modules/normalize.css/normalize.css";

And my rules:

module: {
    rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader,
                "css-loader"
            ]
        },
        {
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "less-loader"
            ]
        }
    ]
};

Solution 3

in index.css:

@import "~normalize.css/normalize.css";

70,937

Author by

Dan Me

Updated on December 28, 2020

Comments

Dan Me over 3 years

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.css applied right away after npm installing it? How would I make edits to it if I wanted to?

Thank you in advance and will be sure to vote up and accept answer
Dan Me over 7 years

Believe my question still stands. What if I npm installed it?
Dan Me over 7 years

Sorry but could you clarify where I would do the import or require? And how would I be able to edit the normalize sheet?
ickyrr over 7 years

Normally what I do is import or require it on my entry point usually index.js. Then webpack will take care of the rest. If you want to edit normalize sheet then you can do so as you would in a very simple project (directly editing the file itself)
ickyrr over 7 years

Or in this case, since it's a node package, you can create a new style.css and import it in your entry file to make it available to all of your components.
Dan Me over 7 years

Do you mind showing an example of how style.css should be created? Would that be the style sheet that holds all the styles? And I'm using SCSS by the way.
ickyrr over 7 years

I updated my answer with a very simple example. It does not matter how you create your css / scss / sass file as long as you import it in your entry file, webpack will be the one to handle that. As long as a module is required or imported.
anonymous coward almost 7 years

I'm a React n00b, and found this via Google. As of today, the normalize docs show you the command line for 'npm install', but don't explicitly mention what the importable package name is (it differs from the install name), or how to utilize it after... therefore, I am very grateful for this answer. =)
Grey Vugrin almost 7 years

I had to use import 'normalize-css/normalize.css', just importing 'normalize.css would look for it in the current directory
jumoel almost 7 years

@GreyVugrin normalize-css is not the same as normalize.css. normalize-css has not been updated since 2014: github.com/chrisdickinson/normalize-css
Sam Murphy almost 5 years

This import is from inside another css file of course.. e.g. style.css
aimlessWonderer almost 5 years

this may also be helpful for folks to resolve issues where -- when prev using style-loader -- styles were inserted into the head after imported styles, thus overriding custom styles with the defaults