Webpack / ES6: как импортировать таблицы стилей

Question

Я вижу, что такие репозитории, как bootstrap, начинают включать в свой файл package.json дополнительные теги, такие как 'style' и 'less'. Как я могу использовать эти теги для импорта активов?

package.json

{
  "name": "bootstrap",
  "style": "dist/css/bootstrap.css",
  "sass": "scss/bootstrap.scss",
  "main": "./dist/js/npm"
}

Я использую модули ES6 и веб-пакет. Я хочу иметь возможность импортировать мои таблицы стилей, используя тег style в package.json.

В настоящее время я делаю что-то вроде этого:

my_stylesheets.less

@import "~bootstrap/dist/css/bootstrap";

что раздражает потребителей добавлять путь, когда он доступен в package.json. Есть ли способ импортировать таблицы стилей с помощью тега в package.json?

Если я не могу использовать тег в файле package.json, существует ли стандартный способ импорта таблиц стилей в модули ES6?

Answer 1

Эта функция пока не включена в веб-пакет. Существует открытая проблема об этом в репозитории загрузчика CSS веб-пакета.

Существует также поток SO по использованию поля стиля, и кажется, что есть некоторые инструменты npm / browserify, которые поддерживают это.

Answer 2

Да!!! Webpack рассматривает все как модуль, в том числе этот милый маленький package.json в вашем репо.

Поэтому вам просто нужно require() это в ваше приложение, а затем получить доступ к свойствам из этого объекта JSON. (Смотрите json-loader для получения дополнительной информации).

Я часто использую это для импорта данных, таких как номер версии и т. Д. Для моего файла конфигурации Webpack для связывания и управления версиями.