Создать-реагировать-приложение (без извлечения) + бурбон / аккуратный?

Question

Я переписываю "старый" прототип React, который использует Bourbon, он также использует gulp-sass в gulpfile для вставки аккуратной зависимости узла:

var sassOptions = { includePaths: require('node-neat').includePaths, };

Я хотел бы использовать create-react-app и иметь "простой" рабочий процесс для стилей с помощью сценария npm для компиляции файлов sass (также потому, что create-реакции-приложение ограничивает вас в этом), но я не могу понять, как это сделать.

"build-css": "node-sass src/styles/ -o src/", "watch-css": "npm run build-css && node-sass src/styles/ -o src/ --watch --recursive"

Вероятно, в будущем я буду переписывать стили, используя другой подход (возможно, использовать стилизованные компоненты, возможно, продолжать использовать Sass и полностью исключить Bourbon), но сейчас мне просто нужно перенести стили Sass из старого проекта.

Есть какие-нибудь идеи по интеграции create-реакции-приложения (без извлечения) и Bourbon/Neat?

Есть ли способ, например, добавить бит neat.includePaths в однострочный скрипт node-sass в package.json?

Answer 1

Насколько я знаю, вы не можете оценить includePaths Вы должны иметь возможность импортировать Бурбон и Neat через одну строку в package.json,

Тем не менее, вы все еще можете использовать Bourbon +Neat с вашим неотгруженным приложением React. Если вы сохраните package.json внесите изменения, как описано здесь React, установите гемы на свой компьютер и установите их локально в каталогах Sass, где вы считаете нужным. В качестве примера;

• / SRC
  • / стили
    • / поставщики
      • / бурбона
      • / аккуратный
      • / Другая-дерзость библиотека
    • /база
    • / расположение
    • /...
  • App.js
  • ...

Установив гемы, вы запускаете команды там, где вы хотите их установить. bourbon install --path <some-path> а также neat install,

Когда вы можете ссылаться на Бурбон и Нит таким образом, это не проблема, чтобы просто @import vendors/bourbon/bourbon и т.п.

Конечно, этот способ управления стилями не соответствует наработанному модульному подходу к React / Webpack, но иногда определенно требуется полностью контролируемое дерево стилей Sass.