如何使用 Babel 转换 scss 以获得反应包？

Posted 2023-03-07

【中文标题】如何使用 Babel 转换 scss 以获得反应包？

【英文标题】：How to transpile scss with Babel for a react package?

【发布时间】：2021-03-11 04:53:00

【问题描述】：

我最近一直沉浸在react中，有一个关于react+scss的问题。

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

我的包起初只有一个纯 javascript/react 组件，我只是用 babel 将它转换为 commonJS，效果很好。不需要 webpack。然后我添加了一个现在包含 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 吗？

任何帮助将不胜感激！

【参考方案1】：

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