在反应中使用哈巴和萨斯

Question

我可以在react使用pug/jade和sass吗？

实际上，我喜欢分离文件，而且我喜欢以sass和pug可以为我做的方式对代码进行分类。

有什么办法可以在反应中使用哈巴狗和萨斯吗？

哈巴狗示例：

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

是的，您可以在React组件中使用Scss。 您必须使用适当的加载程序来执行此操作。 sass-loader它是您要寻找的一个： https : //github.com/webpack-contrib/sass-loader这样您就可以使用

import './styles.scss';

组件的标记必须用JSX（HTML和JavaScript的混合）编写。 但是您可以在输入HTML文件中使用pug，其中包括您的React包。

index.pug

body
    #root

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