如何在npm中使用normalize.css？

Question

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?

Answer 1

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

Answer 2

If you're used to PostCSS in your workflow postcss-import can be very useful in doing this, allowing you to import both local and installed dependencies through the simple @import rule.

Then PostCSS will take care for you to inline the proper stylesheets.

For example, to use normalize.css as in the question:

@import "normalize.css";

In some main.css you will then link in the HTML.

The only downside to this is you can't explicitly componentize your CSS and have it pick the necessary stylesheets just by requiring them from the component's code.