如何在npm中使用normalize.css？

Question

我使用npm来处理我的依赖关系，但迄今为止，我主要用它来处理JavaScript代码，并且总是使用有用的require()在我的代码中导入已安装的软件包。

最近我发现可以使用npm安装normalize.css。
有哪些优点？ 安装后如何在我的代码中使用它（静态的.html和动态的.js文件）？

- seldon

Answer 1

Parcelify非常有用，可以帮助你完成这个任务。你可以与normalize.css一起使用。

JS:

require('normalize.css');

然后运行parcelify：

$ parcelify main.js -c bundle.css

您可以在package.json中添加一个npm脚本，这样您就不必全局安装parcelify来在项目中使用它：

package.json:

{
  "name": "your-package",
  "version": "0.0.0",
  "description": "Your package",
  "main": "main.js",
  "scripts": {
    "build": "parcelify main.js -c bundle.css"
  }
}

然后只需执行：

$ npm run build

- zxqx

---

所以在 main.js 文件中，我使用 require 导入我的 CSS 文件，然后当传递给 Parcelify 时，它会将这些 require 的文件输出到 bundle.css 中？ - seldon

只要你的 require() 模块在它们的 package.json 中有 style 条目，它们就会被捆绑。 - zxqx

你能否设置一个小例子？我不是很理解。 - seldon

您可以查看parcelify存储库中的测试以获取一些基本示例：https://github.com/rotundasoftware/parcelify/tree/master/test - zxqx

我认为“如何使用X？”的答案不应该是“通过使用Y”。 “使用Y”可能是“使用X”的有效方法，但在这种情况下，我认为它不是直接和默认的方法。虽然我可以看到它可能解决问题，但我不会给它负面评价。 - Purefan

Answer 2

如果你已经习惯了在工作流程中使用PostCSS，那么postcss-import将非常有用，它可以通过简单的@import规则导入本地和安装的依赖项。然后，PostCSS会为您处理内联适当的样式表。例如，要像问题中那样使用normalize.css：

@import "normalize.css";

在一些main.css中，您将在HTML中链接它。唯一的缺点是您无法明确地将CSS组件化，并通过从组件代码中要求它们来选择必要的样式表。

- seldon