如何使用 Babel 将 scss 转换为 react 包?

How to transpile scss with Babel for a react package?

最近一直在埋头做react,对react+scss有疑问

我了解 babel 和 webpack 之间的区别以及它们在让 React 应用程序在浏览器中运行时各自的目的。我仍然不明白的是,如果我只是想为反应组件创建一个反应 npm 包,我需要什么。

我的包最初只有一个纯 javascript/react 组件,我只是用 babel 将它转译为 commonJS,效果很好。不需要网络包。然后我添加了一个额外的组件,现在包含 scss:

import styles from '../styles/calendar.scss'

在package.json中我添加了

"sass-loader" and "node-sass"

在 storybook 中,一切正常,但是当我用 babel 转译我的 src 目录时,缺少 scss/css 代码,这显然是预期的,因为 babel 只是一个 js 转译器。

我的问题是我是否真的需要 webpack 来让我的 react 包中的 scss 工作,或者是否有一种方法可以纯粹使用 babel 来做到这一点,因为到目前为止我不需要 webpack。 Babel transpile 为我提供了很好的转译 js 文件,这些文件仍然遵循我的 src 文件夹的文件夹结构。理想情况下,我不想要一个完全捆绑在一起的 index.js 文件。

底线问题,在处理 scss 后,您是否需要的不仅仅是纯 babel?

如有任何帮助,我们将不胜感激!

据我所知,是的。如果你想处理 SCSS,你需要的不仅仅是 Babel。原因是 Babel 是 JavaScript 编译器,也就是说它只编译 JavaScript。对于 SCSS 和其他用途,您需要像 Webpack 这样的打包器。