Updated Bootstrap + SASS in ASP.NET CORE 2, with Gulp? - visual-studio

Question

I'm trying to add Bootstrap with SASS capability to my ASP.NET Core 2 project, but have difficulty accomplishing this. I used NPM to install Bootstrap into node_modules, then got Gulp to move minified css and js dependencies into my wwwroot directory. Now I want to have a SASS file where I override Bootstrap's defaults to fit my needs, and this is where I'm stuck. Here's my Gulp code, 'compile-sass' is not working. I get missing binding error.
const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const root = "./wwwroot/";
const bootstrapStyles = "node_modules/bootstrap/dist/css/bootstrap.min.css";
const bootstrapSass = "node_modules/bootstrap/scss/bootstrap.scss";
const bootstrapScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
];
gulp.task('default', ['build-all']);
gulp.task('build-all', ['build-css', 'build-js']);
gulp.task('build-css', () => {
return gulp.src(bootstrapStyles)
.pipe(gulp.dest('./wwwroot/'));
});
gulp.task('build-js', () => {
return gulp.src(bootstrapScripts)
.pipe(concat('bootstrap.min.js'))
.pipe(gulp.dest(root));
});
gulp.task('compile-sass', () => {
gulp.src(bootstrapSass)
.pipe(sass())
.pipe(gulp.dest(root));
});
// watch bootstrap-overrides.scss for changes and recompile SASS
gulp.task('watch-sass', () => {
gulp.watch(root + 'bootstrap-overrides.scss', ['compile-sass']);
});
This is the exact excerpt of the problem:
gulp.task('compile-sass', () => {
gulp.src(bootstrapSass)
.pipe(sass())
.pipe(gulp.dest(root));
});
Edit: Solved the build error by running the following command: npm rebuild node-sass
My bootstrap-overrides.scss edits are not changing variable values. How do I correctly compile SASS?

Answer 1

Solved it.
const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const root = "./wwwroot/";
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
];
const vendorStyles = "node_modules/bootstrap/scss/bootstrap.scss";
const customerStyleOverrides = root + "scss/*.scss";
gulp.task('default', ['build-vendor']);
gulp.task('build-vendor', ['build-vendor-css', 'build-vendor-js']);
// merge javascripts into a single vendor.min.js file and save it to wwwroot
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest(root));
});
// compile bootstrap and save as vendor.min.css to wwwroot
gulp.task('build-vendor-css', () => {
return gulp.src([vendorStyles, customerStyleOverrides])
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(rename('vendor.min.css'))
.pipe(gulp.dest(root));
});
// watch for changes to styles.css and recompile bootstrap on styles change
gulp.task('watch-sass', () => {
gulp.watch(root + "scss/styles.scss", ['build-vendor-css']);
});