Pug+sass в react?

Question

[Андрей]

Хочу слезть со вьюшной иглы, но уж слишком привык к удобству, которое даёт использование pug и sass и к простоте их подключения во Vue. Есть ли способ достичь в реакте смеси jsx и pug? И как использовать sass вместо css файлов?

Comments

[Владимир Куликов]

Тоже жду ответа :)

[Андрей]

Владимир Куликов, я забил)

[Владимир Куликов]

Андрей, на программирование?

Если нет, то вот есть пример: https://github.com/astery/react-sass-pug-example

[Андрей]

Владимир Куликов, ахахаха, нет, на идею освоить реакт)

Этот пример я находил, писать Pug внутри js строки это боль. Если html внутри jsx умеет в автокомплит, то pug нет(

Во вью с этим работать куда приятнее.

Answer 1

[Mikhail Osher]

Слабо верю в эффективную связку Pug + React, и даже не искал материалы на эту тему.
JSX представляет весьма гибкие инструменты и удобные для работы. Поддержка в Webstorm замечательная, в VSCode вроде тоже.

По поводу SCSS, то практически везде можно воткнуть без проблем.

CRA: https://create-react-app.dev/docs/adding-a-sass-st...

NextJS: https://nextjs.org/docs/basic-features/built-in-cs...

Remix: продукт еще сыроват, поддержка стилей очень слабенькая, но возможная https://remix.run/docs/en/v1/guides/styling#css-pr...

Parcel и webpack имеют возможность добавления scss через плагины/лоадеры.

Comments

[Владимир Куликов]

Открывать и закрывать вечно JSX теги вымораживает и отнимает много времени)

[Mikhail Osher]

Владимир Куликов, редакторы это автоматически делают, по крайней мере webstorm. И еще дают строгую типизацию и автокомплит, если описывать через React.FC<Props>

[Владимир Куликов]

Mikhail Osher, Я emmet настроил по видео на работу с JSX и полегче стало, жить можно)
Только sass-loader для стилей подключил.

Подключение emmet в jsx:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

Answer 2

[WebMast]

Есть интересное решение: https://github.com/pugjs/babel-plugin-transform-re...

Я поддерживаю проект, но сейчас активность там отсутствует, т.к. непонятно будущее babel (или SWC) и не решен вопрос с плагинами для TypeScript.

Тем не менее это решение работает хорошо. Есть инфраструктура вроде eslint плагинов, можно добавить интеграцию с основными IDE или редакторами кода.

Можно попробовать REPL, чтобы понять, работает ли для вас это решение: react.pugjs.org

Comments

[Владимир Куликов]

Спасибо за ответ)