Missed semicolon error when running a gulp task with tailwind and bulma css

Question

I'm new to gulp tasks. I'm practicing it now. After some googling I learned to write few tasks. I'm using tailwind and bulma css in my project.

Here is my setup.

package.json:

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-postcss": "^9.0.0",
    "gulp-purgecss": "^3.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "precss": "^4.0.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "autoprefixer": "^9.8.6",
    "bulma": "^0.9.1",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
  }
}

gulp task:

const gulp = require('gulp');

gulp.task('css:dev', () => {
    const postcss = require('gulp-postcss');

    return gulp.src('./Styles/site.css')
        .pipe(postcss([
            require('precss'),
            require('tailwindcss'),
            require('autoprefixer')
        ]))
        .pipe(gulp.dest('./wwwroot/css/'));
});

site.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../node_modules/bulma/css/bulma.css'; --> This works

This works fine when I run my gulp task gulp css:dev but fails when I remove entire bulma.css and load the separate components.

site.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../node_modules/bulma/sass/utilities/_all.sass';
@import '../node_modules/bulma/sass/components/menu.sass'; --> This fails

Error Message:

" css:dev
[00:49:18] Using gulpfile ~\source\repos\BulmaTailwind\BulmaTailwind\Gulpfile.js
[00:49:18] Starting 'css:dev'...
[00:49:19] 'css:dev' errored after 1.53 s
[00:49:19] CssSyntaxError in plugin "gulp-postcss"
Message:
    precss: C:\Users\xxxx\source\repos\BulmaTailwind\BulmaTailwind\node_modules\bulma\sass\components\menu.sass:1:25: Missed semicolon
> 1 | $menu-item-color: $text !default
    |                         ^
  2 | $menu-item-radius: $radius-small !default
  3 | $menu-item-hover-color: $text-strong !default
Process terminated with code 1.

Edit-1:

As per the suggestions in comments, I included the below imports,

@import '../node_modules/bulma/sass/utilities/mixins.sass';
@import '../node_modules/bulma/sass/components/menu.sass';

And I ended up with new error.

[23:21:34] Starting 'css:dev'...
[23:21:36] 'css:dev' errored after 1.53 s
[23:21:36] CssSyntaxError in plugin "gulp-postcss"
Message:
    precss: C:\Users\xxxx\source\repos\BulmaTailwind\BulmaTailwind\node_modules\bulma\sass\utilities\mixins.sass:12:25: Unknown word
  10 |   position: absolute
  11 |   @if $height != 0
> 12 |     left: calc(50% - (#{$width} / 2))
     |                         ^
  13 |     top: calc(50% - (#{$height} / 2))
  14 |   @else
Process terminated with code 1.

I understood that I'm missing some imports. But now able to find those from bulma official docs.

Please assist on what I'm missing.

Answer 1

After some googling and research, here is how I fixed it.

added gulp-sass by doing npm install gulp-sass and piped gulp-sass in my gulp task.

Here is my final working setup,

package.json:

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0", // --> newly added
    "gulp-clean-css": "^4.3.0",
    "gulp-postcss": "^9.0.0",
    "gulp-purgecss": "^3.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "precss": "^4.0.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "autoprefixer": "^9.8.6",
    "bulma": "^0.9.1",
    "node-sass": "^5.0.0",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
  }
}

gulp task:

const gulp = require('gulp');

gulp.task('css:dev', () => {
    const postcss = require('gulp-postcss');
    const sass = require('gulp-sass'); // --> newly added

    return gulp.src('./Styles/site.css')
        .pipe(sass().on('error', sass.logError)) // --> newly added
        .pipe(postcss([
            require('precss'),
            require('tailwindcss'),
            require('autoprefixer')
        ]))
        .pipe(gulp.dest('./wwwroot/css/'));
});

site.css:

@import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../node_modules/bulma/sass/utilities/_all.sass';
@import '../node_modules/bulma/sass/helpers/typography.sass';
@import '../node_modules/bulma/sass/layout/hero.sass';
@import '../node_modules/bulma/sass/elements/title.sass';
@import '../node_modules/bulma/sass/components/dropdown.sass';
@import '../node_modules/bulma/sass/components/menu.sass';
@import '../node_modules/bulma/sass/components/card.sass';
@tailwind base;
@tailwind components;
@tailwind utilities;