Verwenden Sie Mops und Sass in reagieren

Question

Kann ich pug/jade und sass in react verwenden?

Eigentlich liebe ich es, Dateien zu trennen und ich mag Codes kategorisieren die Art und Weise, die Sass und Mops für mich tun können, ist großartig.

Gibt es eine Möglichkeit, Mops und Sass in Reaktion zu verwenden?

Mops Beispiel:

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

Ja, können Sie SCSS in Ihrem Reagieren Komponente verwenden. Sie müssen dazu einen geeigneten Loader verwenden. sass-loader es die, die Sie suchen: https://github.com/webpack-contrib/sass-loader Auf diese Weise können

import './styles.scss';

Das Markup Ihrer Komponente in JSX (Mischung aus HTML und JavaScript) geschrieben werden muss verwenden können. Aber Sie könnten Mug in Ihrer HTML-Eingabedatei verwenden, die Ihr React-Bundle enthalten würde.

index.pug

body 
    #root 

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