Use pug and sass in react

Question

Can I use pug/jade and sass in react ?

Actually I love to separate files and I like to categorize codes the way sass and pug can do for me is great.

Is there any way to use pug and sass in react?

Pug example:

doctype html
html(lang="en", dir="ltr" , xmlns="http://www.w3.org/1999/xhtml" , prefix="og: http://ogp.me/ns# fb:http://ogp.me/ns/fb#")
  head
    meta(charset="utf-8")
    link(rel="stylesheet" , href="style.css")
  body
    p.a minim tamen labore cillum aute nulla quis anim anim summis
    ul
      each val in('one','two','three')
        li
          a(href="#",target="_blank")=val

Answer 1

Yes, you can use Scss within your React Component. You have to use an appropriate loader to do so. sass-loader it the one you are looking for: https://github.com/webpack-contrib/sass-loader This way you can use

import './styles.scss';

The markup of your component has to be written in JSX (mix of HTML and JavaScript). But you could use pug in your entry HTML file, which would include your React bundle.

index.pug

body
    #root

script(src="path/to/bundle.js")