我最近一直沉浸在 React 中,并有一个关于react + scss的问题。
我理解让React应用程序在浏览器中工作时babel和webpack之间的区别以及它们各自的用途。我仍然不明白,如果我只是想为react组件创建react npm包,那需要什么。
我的程序包起初只有一个纯javascript / react组件,我只是用babel将其转译为commonJS,效果很好。不需要webpack。然后,我添加了一个现在包含scss的附加组件:
import styles from '../styles/calendar.scss'
在package.json中,我添加了
"sass-loader" and "node-sass"
在故事书中,一切正常,但是当我用babel转换src目录时,缺少了scss / css代码,这显然是可以预期的,因为babel只是一个js编译器。
我的问题是我是否真的需要webpack才能使我的react软件包中的scss正常工作,或者是否有一种方法可以完全使用babel进行,因为到目前为止我不需要webpack。Babel transpile给了我很好的转译js文件,这些文件仍然尊重我的src文件夹的文件夹结构。理想情况下,我不希望一个完全捆绑在一起的,完全捆绑在一起的index.js文件。
底线的问题是,与scss打交道时,你是否需要的不仅仅是纯粹的通天塔?
任何帮助,将不胜感激!
据我所知,是的。如果你想处理SCSS,则不仅需要Babel。原因是Babel是JavaScript编译器,这意味着它仅编译JavaScript。出于SCSS和其他目的,你需要像Webpack这样的捆绑器。