Import multiple SCSS files into one SCSS file and compile to one CSS file

Question

So I have the following main scss directory: /assets/scss/main.scss.

In this file, I have the following items:

@charset "utf-8";

// Initial variables must be imported first
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "../../node_modules/bulma/sass/utilities/functions.sass";

When I jump into the functions file, I'm able to view Bulmas functions code, so I want that imported.

Now I have a single css file inside the following directory: /assets/dist/main.css.

I would like to import all the .scss files under scss/ into main.scss and then compile main.scss into main.css.

I tried utilizing the following script, but nothing happens when it compiles:

  "scripts": {
    "css-build": "sass assets/scss/main.scss:assets/dist/main.css --style compressed"
  },

The only thing that gets compiled inside the main.css file is the following:

/*# sourceMappingURL=main.css.map */

Does anyone have a good NPM/Gulp/etc.. solution on how I can take a directory of .scss files and import them into one .scss file and then compile to main.css?

Answer 1

This is the config I use :

• Installs

npm i node-sass-glob-importer
npm i --global gulp-cli
    
npm i sass gulp-sass --save-dev
npm i gulp-sass-glob --save-dev
npm i gulp-sourcemaps
npm i gulp-concat
npm i gulp-uglify

• gulpfile.js :

const { src, dest } = require('gulp');

const
sourcemaps = require('gulp-sourcemaps'),
sassGlob = require('gulp-sass-glob'),
sass = require('gulp-sass')(require('sass')),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');

function scss() {
return src(['./dev/assets/_scss/main.scss'])
.pipe(sourcemaps.init({largeFile: true}))
.pipe(sassGlob())
.pipe(sass())
.pipe(concat('theme.min.css'))
.pipe(sourcemaps.write('.', {debug: true}))
.pipe(dest('dev/assets/css'));
};
exports.scss = scss;

function js() {
return src('./dev/assets/_scripts/**/*.js') 
.pipe(uglify()) 
.pipe(sourcemaps.init())  
.pipe(concat('theme.min.js')) 
.pipe(sourcemaps.write('.')) 
.pipe(dest('dev/assets/js'));
};
exports.js = js;

main.scss contains imports like @import 'folder/*'; or @import 'file.scss';

Then you can call gulp scss and gulp js