Menu
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
277
There are two ways to use Normalize in a project: edit the source to customize your own Normalize stylesheet, or use it as a base and add styles on top. The former is a pick-and-choose strategy where you go through the Normalize. css file and delete whatever you don't need to make your own custom stylesheet.
To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is index. css or App.
Normalizing maintains useful defaults over non-stylizing everything and it won't clutter your dev tools window. Moreover, Resetting is meant to strip all default browser styling on elements. For e.g. margins, paddings, font sizes of all elements are reset to be the same.
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.
82
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" ] } ] }; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With