Как использовать normalize.css с npm?

Я обрабатываю свои зависимости с помощью npm, но до сих пор я использовал его в основном для кода Javascript, и я всегда импортировал установленные пакеты в свой код с полезным require().

Недавно я обнаружил, что normalize.css можно установить с помощью npm.
Каковы преимущества? Как использовать его в моем коде (как статические .html, так и динамические .js файлы) после установки?

Ответы

Ответ 1

parcelify действительно полезно для этого. Вы можете использовать его совместно с пакетом normalize.css.

JS:

require('normalize.css');

затем выполните parcelify:

$ parcelify main.js -c bundle.css

Вы можете добавить npm script к вашему 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"
  }
}

а затем просто выполните:

$ npm run build

Ответ 2

Если вы привыкли к PostCSS в своем рабочем потоке, postcss-import может быть очень полезным при этом, позволяя вам импортировать как локальные, так и установленные зависимости через простое правило @import.

Затем PostCSS позаботится о том, чтобы вы ввели правильные таблицы стилей.

Например, чтобы использовать normalize.css как в вопросе:

@import "normalize.css";

В некотором main.css вы будете ссылаться в HTML.

Единственным недостатком этого является то, что вы не можете явно сконфигурировать свой CSS и выбрать нужные таблицы стилей, просто потребовав их от кода компонента.