5

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

Dave O'Brien
  • 199
  • 2
  • 5
  • 3
    http://stackoverflow.com/questions/2477271/concatenate-text-files-with-windows-command-line-dropping-leading-lines or http://stackoverflow.com/questions/4969641/append-one-file-to-another-in-linux – cimmanon Nov 24 '14 at 17:22
  • What a doof - I had my head too much in the SASS side of things. This makes complete sense... – Dave O'Brien Nov 24 '14 at 22:24
  • You could use Gulp https://stackoverflow.com/questions/37133297/combine-all-sass-files-into-a-single-file – Vince Aug 04 '17 at 14:45

3 Answers3

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\""
}
Vitalii
  • 153
  • 5
1

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

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

cgatian
  • 22,047
  • 9
  • 56
  • 76
0

You could modify this for javascript. Kept it in typescript as I am currently solving this issue on my own (angular 6 library), and ran into this question.

According to the docs, angular material uses this implementation. 

import * as path from 'path';
import { Bundler } from 'scss-bundle';
import * as fs from 'fs';

(async () => {
  // Absolute project directory path.
  // Assuming all of your scss files are in `./projects/my-library/src/styles`
  const projectDirectory = path.resolve(__dirname, './projects/my-library/src/styles');
  const bundler = new Bundler(undefined, projectDirectory);
  // Relative file path to project directory path.
  // The name of your file here would be `app.scss`
  // Kept this here if anyone runs into this answer and wants to do this with the new angular 6 library.
  const { found, bundledContent } = await bundler.Bundle('./_all-theme.scss');

  if (found && bundledContent) {
    // where you want to save the file, and what you would like it to be called. 
    const location = path.resolve(__dirname, '_theming.scss');
    fs.writeFileSync(location, bundledContent);
  }
})();
Snackdex
  • 674
  • 8
  • 18