Использование Grommet с приложением create-react-app

ОБНОВИТЬ

Нет необходимости читать это, если вы просто пытаетесь действовать, не зная, как это сделать. То, что написано в этом посте, добавлено в приложение grommet react app. Я использовал это, и это здорово. Я даже развернул его прямо в Heroku.

Использование Grommet с приложением create-react-app

Я недавно закончил свое первое пригодное для использования приложение React / Redux и, как это обычно бывает с первыми проектами, я сразу готов переписать его, используя знания, которые я получил во время первого раунда.

Я хорошо учился. Я написал свой файл WebPack с нуля, узнал о жизненном цикле компонентов, создал переходники для обработки асинхронных запросов API и придумал (трудный путь) использовать неизменяемые структуры данных для обработки изменений состояния. Я узнал достаточно, чтобы чувствовать себя комфортно, зная, что я делаю и с чем не хочу иметь дело (когда мне это не нужно), когда я начинаю новый проект. Общие конфигурации сборки и отдельные стили компонентов четко попадают в эту категорию.

Хорошие новости! Другие люди приложили ОЧЕНЬ много работы, чтобы позаботиться об этих вещах за меня.

создать-реагировать-приложение

Create-react-app, отстаиваемый Дэном Абрамовым и поддерживаемый Facebook, - это проект с открытым исходным кодом, нацеленный на предоставление наилучшей конфигурации сборки для начальной загрузки приложения React. После простой установки, создания и запуска приложение create-react-app обслуживает проект с почти всем, что мне нужно.

Люверс

Помимо прочего, Grommet - это набор компонентов React, предназначенный для корпоративных приложений. Это прекрасный набор компонентов пользовательского интерфейса, который придаст профессиональный вид следующей версии моего небольшого приложения.

но…

Стили люверсов находятся в SASS, и, хотя очень тщательно, приложение create-react-app не поддерживает загрузку SASS из коробки. Хотя я мог бы включить файлы min.css, в будущем я, возможно, захочу отредактировать стиль. Итак, мне нужно катапультироваться.

Первоначально приложение create-response-app абстрагирует все файлы конфигурации, чтобы обеспечить максимально удобное взаимодействие с пользователем. «Выбросив» эту настройку, я получаю все файлы конфигурации и могу настроить конфигурацию сборки.

LDT (Давай сделаем это)

Изнутри каталога проекта я запускаю

npm run eject

create-react-app, дай мне знать, что пути назад нет, но я продолжаю!

Теперь в моем каталоге есть папка config, в которой находятся два файла webpack.

webpack.config.dev.js
webpack.config.prod.js

Поскольку у меня возникли проблемы с изучением веб-пакета, когда я создал первую версию этого приложения, я знаю, что мне нужно отредактировать загрузчики в этих файлах, чтобы добавить поддержку SASS. Я могу получить необходимые изменения из автономной установки для Grommet.

Во-первых, мне нужны загрузчики.

npm install --save-dev node-sass sass-loader

Для каждого файла webpack я просто добавляю загрузчик sass в массив загрузчиков.

{  
  test: /\.scss$/,
  loader: 'style!css!sass?outputStyle=compressed'
}

Также убедитесь, что файл знает, что я обрабатываю файлы SASS с помощью загрузчика, добавив расширение к массиву exclude.

exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.scss$/,
          /\.json$/,
          /\.svg$/
         ],

… И массив extensions.

extensions: ['.js', '.json', '.jsx', '.scss', ''],

Затем после (как снаружи) объекта модуля добавьте пути sassLoader.

sassLoader: {
  includePaths: [
    './node_modules'
  ]
},

Наконец, я могу добавить файлы scss в свой файл index.js и продолжить свой проект.

import '../node_modules/grommet/scss/vanilla/index.scss';

Забрать

Найдите время, чтобы познакомиться со своими инструментами. Они податливы, но только в умелых руках.

Использование Grommet с приложением create-react-app

ОБНОВИТЬ