我目前正在构建一个 npm 组件库,并使用汇总捆绑过程来编译该库以进行分发。该项目的CSS是使用SCSS编写的,但它也依赖于Bulma ,这是一个用SASS编写的CSS框架。
我希望能够将 bulma 源代码与我的自定义 scss 全部捆绑到一个 scss 文件中,然后我可以在其他项目中使用该文件。这样我仍然可以从这些项目中 scss 提供的功能中受益,例如变量和 mixin。
我希望在构建过程中实现自动化,这样我在开发新组件时就不必担心它。我查看了许多用于捆绑 scss 文件的 npm 包,但没有一个包同时支持SASS和SCSS。我也尝试过将我的项目完全转换为 sass,但总体上似乎没有对 sass 捆绑提供任何良好的支持。
例如,我可能有一个 main.scss 文件,如下所示:
@import "~bulma/bulma.sass";
@import "./utils/variables.scss";
Run Code Online (Sandbox Code Playgroud)
它将 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"]
}
Run Code Online (Sandbox Code Playgroud)
据我所知,这应该遍历样式文件夹和 Bulma 依赖项文件夹的所有子目录中的所有文件,并将它们一起编译成一个bundle.sass文件。尽管我更喜欢来自 …