npm - 有没有办法将各种 SCSS 和 SASS 文件一起编译成一个 SCSS 包文件？

我目前正在构建一个 npm 组件库，并且我正在使用汇总捆绑过程来编译库以进行分发。该项目的 css 是使用SCSS编写的，但它也依赖于Bulma ，它是一个用SASS编写的 css 框架。

我想要的是能够将 bulma 源代码与我的自定义 scss 一起捆绑到一个 scss 文件中，然后我可以在其他项目中使用该文件。这样我仍然可以从这些项目中的 scss 提供的功能中受益，例如变量和 mixins。

我希望在构建过程中实现自动化，这样我在开发新组件时就不必担心它。我查看了许多用于捆绑 scss 文件的 npm 包，但它们都没有同时支持SASS和SCSS。我也尝试过将我的项目完全转换为 sass，但总体上似乎对 sass 捆绑没有任何好的支持。

例如，我可能有一个如下所示的 main.scss 文件：

@import "~bulma/bulma.sass";
@import "./utils/variables.scss";

它将 sass 和 scss 文件一起导入。这是sass 编译器支持的东西，我可以将其编译为捆绑的 css 文件而不会出现任何问题。但似乎不支持捆绑到一个 scss 文件中。

我一直在尝试使用的两个主要 NPM 包是：

scss-bundle很棒，但它似乎没有 SASS 支持，所以这对 Bulma 来说是不行的。

至于bundle-scss，我将我的项目转换为使用 SASS 并相应地配置了包，这里是使用的配置：

{
  "dest": "dist/bundle.sass",
  "mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}

据我所知，这应该遍历我的样式文件夹和 Bulma 依赖文件夹的所有子目录中的所有文件，并将它们一起编译成一个bundle.sass文件。虽然我更喜欢中的配置选项scss-bundle，但这基本上是我正在寻找的。

但是它不起作用。该包似乎无法解析@importSASS 文件中的语句。不管我使用什么语法。而且即使是基于语法的，我也无法改变布尔玛的语法。可能是我在掩码选项中使用了错误的 globbing 模式吗？还是这个包不起作用？

所以我的问题是，TLDR：

另外，我知道我可以将 Bulma 单独导入到需要它的项目中，但我真的更希望将它们全部放在一个包中。

谢谢！我希望我能清楚地解释一切！

标签： npmsassrollupbulma