how do I use a bundle.css file?

Question

I created a bundle.css file from multiple sass file sources using gulp 4, and the sourceMaps were added to it in this function:

const bundleSass = () => {
  return src('./src/scss/**/*.scss')
    .pipe(sourceMaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCss())
    .pipe(sourceMaps.write())
    .pipe(concat('bundle.css'))
    .pipe(dest('./dist/static/css'))
}

But now, how I use the CSS within the bundle.css file? Do I need to extract the individual css files from it first? If so, how do I do that?

Edit:

I installed gulp-extract-css and implemented it as suggested on the official [git page] (https://github.com/b44rd/gulp-extract-css/)

const ecss = require('gulp-extract-css')

const extractCSS = () => {
  src('dist/static/css/**/bundle.css')
    .pipe(ecss({
      log: true,
      takeout: [
        {
          styleprefix: '.somesubtheme',
          filename: 'somesubtheme.css'
        },
        {
          styleprefix: '.ie9',
          filename: 'outdated.css'
        },
      ]
    }))
    .pipe(dest('./dist/static/css'))
}

But I receive this error message when i run gulp extractCSS:

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
    at maybeCallback (node:fs:177:3)
    at Object.writeFile (node:fs:2118:14)
    at Transform.transform [as _transform] (/mnt/c/Users/marti/OneDrive/Desktop/test/html-css-concepts/sandbox/node_modules/gulp-extract-css/index.js:86:10)
    at Transform._read (/mnt/c/Users/marti/OneDrive/Desktop/test/html-css-concepts/sandbox/node_modules/gulp-extract-css/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/mnt/c/Users/marti/OneDrive/Desktop/test/html-css-concepts/sandbox/node_modules/gulp-extract-css/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/mnt/c/Users/marti/OneDrive/Desktop/test/html-css-concepts/sandbox/node_modules/gulp-extract-css/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (/mnt/c/Users/marti/OneDrive/Desktop/test/html-css-concepts/sandbox/node_modules/gulp-extract-css/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at Transform.Writable.write (/mnt/c/Users/marti/OneDrive/Desktop/test/html-css-concepts/sandbox/node_modules/gulp-extract-css/node_modules/readable-stream/lib/_stream_writable.js:194:11)
    at DestroyableTransform.ondata (/mnt/c/Users/marti/OneDrive/Desktop/test/html-css-concepts/sandbox/node_modules/readable-stream/lib/_stream_readable.js:619:20)
    at DestroyableTransform.emit (node:events:527:28)

Answer 1

For anyone interested, this is my complete gulpfile.js:

const { src, dest, series, watch } = require('gulp')
const sass = require('gulp-sass')(require('sass'))
const minifyCss = require('gulp-clean-css')
const sourceMaps = require('gulp-sourcemaps')
const concat = require('gulp-concat')

const sassSrc = './src/scss/**/*.scss'
const outputDir = './dist/static/css'

const bundleSass = () => {
  return src(sassSrc)
    .pipe(sourceMaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('bundle.css'))
    .pipe(minifyCss())
    .pipe(sourceMaps.write())
    .pipe(dest(outputDir))
}

const devWatch = () => {
  watch(sassSrc, { ignoreInitial: true, usePolling: true }, bundleSass)
}


exports.default = series(bundleSass, devWatch)

Concatenating before minifying and writing sourceMaps solved my issue where only the last stylesheet was being applied to the page and could be viewed in DevTools.