如何在npm中使用normalize.css？

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().

我正在使用npm处理我的依赖项,但是直到现在我主要用它来代替Javascript代码而且我总是使用有用的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?

最近我发现normalize.css可以用npm安装。有什么好处?如何在安装后在我的代码(静态.html和动态.js文件)中使用它?

2 个解决方案

#1

parcelify is really useful for doing just this. You can use it in concert with the normalize.css package.

parcelify对于这样做非常有用。您可以与normalize.css包一起使用它。

JS:

require('normalize.css');

then run parcelify:

然后运行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:

您可以将npm脚本添加到package.json中,这样您就不必全局安装parcelify以在项目中使用它:

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

#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.

如果您习惯于在工作流程中使用PostCSS,则postcss-import在执行此操作时非常有用,允许您通过简单的@import规则导入本地和已安装的依赖项。

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

然后PostCSS会照顾您内联正确的样式表。

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

例如,要在问题中使用normalize.css:

@import "normalize.css";

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

在一些main.css中,您将在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.

唯一的缺点是你无法明确组件化你的CSS,只需从组件的代码中要求它们就可以选择必要的样式表。

#1