Compile all files in subfolder from SASS to CSS - css

Question

I'm trying to compile a set of scss files into a single css file. For example, here is my folder structure:
theme
- assets
- src
- sass
- config
- _grid-system.scss
- _variables.scss
- _client-styles.scss
- _typography.scss
- styles.scss
From the above, I'm looking to compile _client-styles.scss and _typography.scss into one css file. This new CSS file will sit in the same folder and will be called core.css (will sit under the sass folder).
I have gulpfile.js set up which compiles all .scss files into css in the same folder. But don't know how to approach this conversion as I want to ignore the styles.scss file.
Current gulpfile.js:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss();
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch
What styles.scss looks like (for reference):
#import "config/**.scss";
#import "client-styles.scss";
#import "typography.scss";
How do I go about this? Compile the '_client-styles.scss' and '_typography.scss' file into 'core.css' that will sit under sass folder:
theme
- assets
- src
- sass
- config
- _grid-system.scss
- _variables.scss
- _client-styles.scss
- _typography.scss
- styles.scss
- core.css (new file here)

Answer 1

You can create a core.scss file where you will import all sass files in the subfolders like this:
// change the path accordingly
#import "./sass/**/*.scss";
Using gulp-sass-glob you can pipe it in your gulpfile.js this way:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var sassGlob = require("gulp-sass-glob");
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sassGlob())
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss();
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

Answer 2

Another way to compile many SCSS files would be to use the many-to-many compilation mode on the dart sass cli tool.
In my project, SASS is being managed by NPM, so to achieve this you can do:
If sass is not already installed with NPM, npm install --save-dev sass to install sass as a dev dependency for your current project or npm install -g sass to install it globally on your system
npx sass some_path/scss_dir:some_other_path/css_output_dir to compile all the *.scss files in some_path/scss_dir and output them (with source maps) to some_other_path/css_output_dir
npx sass some_path/scss_dir:some_other_path/css_output_dir --watch will re-build the compiled CSS when any of the SCSS files are changed