Guide to using normalize.css via npm installation with webpack

Question

Guide to using normalize.css via npm installation with webpack

Currently, I am utilizing webpack in conjunction with ReactJS and am exploring the implementation of normalize.css after installing it via npm ().

Does the normalize.css take effect immediately upon npm installation? If I were to make modifications to it, how would I go about doing so?

javascript html css npm webpack

Answer 1

Answer №1

One way to incorporate the npm-installed normalize.css in React is as follows:

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

import 'normalize.css'; // Add this line

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

ReactDOM.render(<h1>Hello, World!</h1>, root);

After implementation, the text will now display like this:

https://i.sstatic.net/pF9BH.png

Take note that the text styling is courtesy of normalize.css.

To make it function properly, you should have a setup similar to the following:

1) Insert the provided JavaScript code into index.js

2) Add normalize.css (and other dependencies) 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) Ensure the correct loaders are utilized 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) Integrate an index.html file to view the changes:

<!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>

5) Install all dependencies by running:

npm install

6) Initiate the Webpack devserver with the command:

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

NOTE: This guide is based on version 5.0.0 of normalize.css. Using version 6.0.0 or higher will result in a different font style, as the opinionated rules were removed from normalize.css in that version.

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

Answer 2

One way to incorporate the npm-installed normalize.css in React is as follows:

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

import 'normalize.css'; // Add this line

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

ReactDOM.render(<h1>Hello, World!</h1>, root);

After implementation, the text will now display like this:

https://i.sstatic.net/pF9BH.png

Take note that the text styling is courtesy of normalize.css.

To make it function properly, you should have a setup similar to the following:

1) Insert the provided JavaScript code into index.js

2) Add normalize.css (and other dependencies) 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) Ensure the correct loaders are utilized 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) Integrate an index.html file to view the changes:

<!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>

5) Install all dependencies by running:

npm install

6) Initiate the Webpack devserver with the command:

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

NOTE: This guide is based on version 5.0.0 of normalize.css. Using version 6.0.0 or higher will result in a different font style, as the opinionated rules were removed from normalize.css in that version.

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

Answer 3

Answer №2

To solve the issue with WebPack 4 not importing normalize.less, try using normalize.css instead.

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

Here are the rules to include in your module:

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

Answer 4

To solve the issue with WebPack 4 not importing normalize.less, try using normalize.css instead.

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

Here are the rules to include in your module:

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

Answer 5

Answer №3

Within index.css:

Importing the normalize.css file:

Answer 6

Within index.css:

Importing the normalize.css file:

Answer 7

Answer №4

When you use the import or require function, Webpack will automatically include the file unless specified otherwise. For instance:

Please note that I am working with Webpack 2.

module: {
    rules: [ // changed from 'loaders' to 'rules'
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.sass$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: ['style-loader','sass-loader']
            })
        }
    ]
}

The use of the exclude property will handle this.

For instance:

// public/assets/style.scss
@import 'substyle1';
@import 'substyle1';

body {
  background-color: red;
}

// src/index.js -> entry file
import '../public/assets/style.scss';
// Webpack will recognize that you are importing your SCSS / SASS file

I hope this explanation is beneficial.

Answer 8

When you use the import or require function, Webpack will automatically include the file unless specified otherwise. For instance:

Please note that I am working with Webpack 2.

module: {
    rules: [ // changed from 'loaders' to 'rules'
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.sass$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: ['style-loader','sass-loader']
            })
        }
    ]
}

The use of the exclude property will handle this.

For instance:

// public/assets/style.scss
@import 'substyle1';
@import 'substyle1';

body {
  background-color: red;
}

// src/index.js -> entry file
import '../public/assets/style.scss';
// Webpack will recognize that you are importing your SCSS / SASS file

I hope this explanation is beneficial.

Answer 9

Answer №5

To start, you can either install or download normalize.css from GitHub. My recommendation would be to download it for easier access. Once you have it, there are two primary ways to utilize it effectively.

Method 1: Use normalize.css as a foundation for your project's base CSS, adjusting the values as needed to align with the design specifications.

Method 2: Simply include normalize.css as is and then build upon it, making changes to the defaults in your CSS as required.

For instance, all you need to do is place the downloaded files into your project folder and link to it using a link tag:

link rel="stylesheet" type="text/css" href="normalize.css"

IMPORTANT: Make sure that the href content points to the correct folder where normalize is located.

Answer 10

To start, you can either install or download normalize.css from GitHub. My recommendation would be to download it for easier access. Once you have it, there are two primary ways to utilize it effectively.

Method 1: Use normalize.css as a foundation for your project's base CSS, adjusting the values as needed to align with the design specifications.

Method 2: Simply include normalize.css as is and then build upon it, making changes to the defaults in your CSS as required.

For instance, all you need to do is place the downloaded files into your project folder and link to it using a link tag:

link rel="stylesheet" type="text/css" href="normalize.css"

IMPORTANT: Make sure that the href content points to the correct folder where normalize is located.

Guide to using normalize.css via npm installation with webpack

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating Pop-up Dialog Boxes in WebForms Using jQuery

Is there a way to programmatically access the title of a TitledPane in JavaFX without using CSS?

How can you retrieve the property value from an object stored in a Set?

Is there a way for me to extract information from the subsequent pages of the posts I've already collected?

Data input not populating in email

Utilizing useEffect to retrieve and display an empty array in a React component

What could be the reason for the malfunctioning of the Yarn package manager installation?

At what point is it appropriate for me to delete the token?

Tips for connecting a Django API project with a nodejs and react frontend

The side modal features a full-height design with headers, bodies, and footers that are

Acquiring inner HTML content with PHP

Ways to divide the header column of a bootstrap 4 table?

What is the CSS method for altering the color of a slider's runnable track upon selection?

"Step-by-Step Guide: Implementing a Modal Popup Form in Angular with NgBootstrap and FormsModule

What's the best way to update the fill color of an SVG dynamically?

Tips for transferring an array from a php page to a javascript page

A Typescript Function for Generating Scalable and Unique Identifiers

CSS flexbox completely collapses all child elements that are empty

Refreshing page using jQuery following an AJAX request

The issue with ng-bind-html causing the disappearance of paragraph spaces