Menu
I'm handling my dependencies with npm, but until now I used it mainly for Javascript code and I always imported the installed packages in my code with the useful require().
Recently I found that normalize.css could be installed with npm.
What are the advantages? How do I use it in my code (both static .html and dynamic .js files) after installation?
518
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.
Browsers apply styles to elements before you've written any CSS at all, and sometimes those styles vary. Normalizing your CSS lets you rest assured, knowing that you have the same base layer of styles applied across all browsers.
parcelify is really useful for doing just this. You can use it in concert with the normalize.css package.
JS:
require('normalize.css');
then run parcelify:
$ parcelify main.js -c bundle.css
You can add an npm script to your package.json so you don't have to install parcelify globally to use it in your project:
package.json:
{
"name": "your-package",
"version": "0.0.0",
"description": "Your package",
"main": "main.js",
"scripts": {
"build": "parcelify main.js -c bundle.css"
}
}
and then just do:
$ npm run build
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
