I'm currently building an npm component library and i'm using a rollup bundling process to compile the library for distribution. The css for the project is written using SCSS, but it also depends on Bulma, which is a css framework written in SASS.
What I would like is to be able to bundle the bulma source code along with my custom scss all into one scss file that I can then use in other projects. That way I can still benefit from the features offered by scss in those projects, such as variables and mixins for example.
I would like this to be automated during the build process so that I don't have to worry about it while developing new components. I've looked at many npm packages for bundling scss files but none of them support SASS and SCSS together. I've also tried converting my project entirely to sass but there doesn't seem to be any good support for sass bundling in general.
So for example, I may have a main.scss file that looks something like this:
@import "~bulma/bulma.sass";
@import "./utils/variables.scss";
It imports both sass and scss files together. This is something that is supported by the sass compiler, and I can compile this to a bundled css file without any issues. But there does not seem to be any support for bundling into one scss file.
The two main NPM packages that i've been attempting to use are:
scss-bundle is great, but it doesn't seem to have SASS support, so that's a no-go with Bulma.
As for bundle-scss I converted my project to use SASS and configured the package accordingly, here's the config is used:
{
"dest": "dist/bundle.sass",
"mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}
From what I can tell, this should go through all of the files in all of the subdirectories of both my styles folder and the Bulma dependency folder and compile them together into one bundle.sass file. And although I would prefer the configuration options from scss-bundle, this is essentially what I am looking for.
However it doesn't work. The package can't seem to resolve the @import statements within the SASS files. Regardless of the syntax I use. And even if it was based on syntax, I can't change Bulma's syntax. Could it be that I'm using the wrong globbing pattern in the mask option? Or does this package just not work?
So my question is, and TLDR:
- Can I bundle SASS and SCSS together into one file using some NPM package?
- If not, is there a simple and automated way for me to transpile SASS to SCSS and then bundle them together?
- If neither of those are possible, is there a working npm SASS bundler that someone can direct me towards? Because bundle-scss does not seem to work.
Also, I am aware that I could just import Bulma separately into the project that needs it, but i'd really prefer to have it all come down together in one package.
Thanks! I hope I explained everything clearly!