Combining Multiple SASS files into one SASS file

Question

Does anyone know if there is a way to combine multiple SASS/SCSS files into one SASS/SCSS file. I do mean "into one SASS/SCSS" and not into a CSS file.

For example, I have 3 scss files:

• app.scss
• base.scss
• layout.scss

The app.scss file contains 2 imports to base.scss and layout.scss.

I would like to beable to generate 1 SCSS file that basically concatenates the files and does not process the sass.

It's fairly difficult to search for as everything that gets return is to do with combining into CSS.

Why would I want to do this? Basically, I'd like to easily reference a set of SCSS files from within a codepen (other online code editor).

Thanks

Answer 1

I analyze all files by the mask, find all imports inside and concatenate into one file. So I don't need one entry point

npm install -D bundle-scss

"script": {
  "postbuild": "npm run themes",
  "themes": "bundle-scss -m \"./src/**/*.theme.scss\" -d \"./dist/themes.scss\""
}

Answer 2

scss-bundle solves this problem https://github.com/reactway/scss-bundle

Caution: Does not support newer module based imports. Issue #90