Warm tip: This article is reproduced from serverfault.com, please click

reactjs-如何与Babel一起将scss转换为react包?

(reactjs - How to transpile scss with Babel for a react package?)

发布于 2020-11-28 19:35:00

我最近一直沉浸在 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打交道时,你是否需要的不仅仅是纯粹的通天塔?

任何帮助,将不胜感激!

Questioner
rails_has_elegance
Viewed
0
kunquan 2020-11-29 04:34:57

据我所知,是的。如果你想处理SCSS,则不仅需要Babel。原因是Babel是JavaScript编译器,这意味着它仅编译JavaScript。出于SCSS和其他目的,你需要像Webpack这样的捆绑器。