Импорт CSS в Semantic-UI-React

Я буду использовать Semantic-UI-React в своем проекте, но столкнулся со следующими проблемами:

Ссылка на документы: https://react.semantic-ui.com/usage#css

  1. Документы говорят, что webpack 1 поддерживается, но не рекомендуется. Я использую приложение Create React, которое поставляется с веб-пакетом версии 1.14.0. Значит ли это, что я не должен использовать Semantic-UI-React с CRA?

  2. Для стилизации мне также нужны некоторые пользовательские стили в моем проекте, поэтому я выбрал третий вариант пакета Semantic UI, упомянутый в документации. npm install semantic-ui --save-dev запускает gulp внутри и создает папку semantic. Но папки dist, как указано в документах, нет. По какому пути я должен ссылаться на semantic.min.css в моем файле index.js?

В основном я пытаюсь использовать Semantic-UI-React с semantic.min.css с некоторыми из моих собственных стилей поверх него. Но, кажется, я делаю какую-то ошибку в настройке. Другой вариант может заключаться в том, чтобы продолжить работу с пакетом Semantic UI CSS? ... но, согласно документам, я не смогу использовать пользовательские стили с этим методом.

Я немного запутался здесь, пожалуйста, помогите :)


reactjs create-react-app redux semantic-ui-react semantic-ui
person FE_Addict    schedule 14.06.2017    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Комментарий документации SUI-React о том, что не рекомендуется использовать Webpack 1, просто потому, что это не последняя версия Webpack. Webpack 1 в целом работает нормально. Кроме того, текущая версия Create-React-App (1.0) использует Webpack 2, и если вы еще не "отклонили" свой проект CRA, вы можете легко обновить зависимость react-scripts, чтобы использовать последнюю версию.

Если вы хотите создать собственный CSS-файл Semantic-UI, да, вы должны установить пакет semantic-ui, и это создаст папку semantic, содержащую исходные файлы LESS Semantic-UI и систему сборки. Оттуда вы можете вносить любые изменения в исходный код SUI для своей настройки. После внесения изменений запустите gulp build внутри этой папки semantic, и она создаст папку semantic/dist, содержащую скомпилированные файлы CSS (в соответствии с инструкциями на странице https://semantic-ui.com/introduction/build-tools.html). Наконец, вы должны скопировать сгенерированные файлы CSS в свой проект, возможно, в папку src, и импортировать их в исходный код JS.

Если вам не нужно создавать настраиваемую сборку CSS Semantic-UI, вы можете npm install --save semantic-ui-css, которая имеет предварительно созданную версию темы Semantic-UI по умолчанию, и импортировать оттуда CSS.

Что бы это ни стоило, моя собственная серия руководств "Practical Redux" использует Semantic-UI- React и пакет semantic-ui-css, и я покажу, как добавить semantic-ui-css в Практическое руководство, часть 4: макет пользовательского интерфейса и структура проекта. (Я также использовал пользовательскую сборку CSS Semantic-UI в моем «реальном» проекте на работе.)

person markerikson    schedule 14.06.2017
comment
Большое спасибо за этот ответ, и ваш практический учебник по Redux тоже потрясающий! Что вы думаете о производительности semantic-ui-react и semantic-ui? Я прочитал несколько сообщений, в которых упоминалось о том, что сборка веб-пакета слишком велика по размеру. До сих пор он не вызывал у вас затруднений с точки зрения размера? - person FE_Addict; 15.06.2017
comment
Честно говоря, конкретное приложение, над которым я работаю, все еще находится на стадии прототипа, и мы еще не занимались оптимизацией размера пакета. Я скажу, что и SUI, и SUI-React кажутся немного большими, поэтому они, вероятно, не лучший выбор, если вы пытаетесь создать высокооптимизированный пакет, но они обеспечивают много функций и хороший базовый внешний вид. из коробки. - person markerikson; 16.06.2017
comment
Я также нахожусь на самом начальном этапе своего проекта, поэтому, возможно, я буду искать какой-то другой вариант, если здесь проблема с размером. Мне очень понравилась библиотека antd, но часть их документации все еще не переведена. React bootstrap тоже выглядит как вариант. Что вы думаете о начальной загрузке React и прочем? - person FE_Addict; 16.06.2017
comment
Серьезно не рассматривал и не исследовал ни один из них. - person markerikson; 17.06.2017