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

The Problem:

After installing normalize.css using npm in a ReactJS project with webpack, how can I apply the styles and make edits to the CSS file if needed?

The Solutions:

Solution 2: Import normalize.css using @import rule after npm installation

To use normalize.css after installing it via npm, you can import it into your webpack configuration using the @import rule. Here’s how you can do it:

1. Import normalize.css in webpack configuration: In your webpack configuration file (usually webpack.config.js), add the following line to import normalize.css:
2. @import "../node_modules/normalize.css/normalize.css";
3. Specify CSS and Less rules in webpack configuration: In the module.rules section of your webpack configuration, define rules for handling CSS and Less files:

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

4. Save and Build: Save your webpack configuration file and run webpack command to bundle your application.

By following these steps, you can successfully import and use normalize.css with webpack, allowing you to easily reset styles across different browsers and devices.

Solution 1:

To use normalize.css with webpack, follow these steps:

1. Install normalize.css using npm:

npm install normalize.css --save-dev

2. In your webpack configuration file (webpack.config.js), add normalize.css to the list of CSS loaders:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

3. In your main CSS file (e.g. index.css), import normalize.css using the tilde (~) prefix to indicate a node module:

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

4. Save your changes and run webpack.
5. Normalize.css will now be applied to your project.

To make edits to normalize.css, you can either:

• Edit the normalize.css file directly in your node_modules directory.
• Create a custom CSS file that imports normalize.css and then make your edits in the custom CSS file. This is the recommended approach, as it allows you to keep your edits in a separate file and avoid modifying the normalize.css file directly.

Solution 4: Using npm install and webpack for normalize.css

To use normalize.css with webpack, you need to import or require it in your code. Once you do that, Webpack will include it unless you specify otherwise. Here’s an example of how you can configure Webpack to exclude normalize.css from being bundled:

module: {
    rules: [ // 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 exclude property will prevent Webpack from bundling normalize.css. Here’s an example of how you can import normalize.css in your code:

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

body {
  background-color: red;
}

And finally, you can import your SCSS / SASS file in your entry file, like this:

// src/index.js -> entry file
import '../public/assets/style.scss';

When you run Webpack, it will bundle your code and include normalize.css as a separate file.