:mag_right:

css/_scss/mixin.scss

@@ -0,0 +1,4 @@
+@import "../../node_modules/bootstrap/scss/bootstrap";
+
+$body-bg: #000;
+$body-color: #111;

css/style.css

@@ -1,8 +1,8 @@
 /*********** Body ***********/
 body {
-  color: #000;
+/*  color: #000;
   background:#363e48;
-  font-family: sans-serif;
+  font-family: sans-serif; */
 }
 
 /*********** Layout ***********/

gulpfile.js

@@ -2,11 +2,15 @@ const gulp = require('gulp'),
       useref = require('gulp-useref'),
       gulpif = require('gulp-if'),
       uglify = require('gulp-uglify'),
+      sass = require('gulp-sass'),
       cleanCSS = require('gulp-clean-css'),
       rename = require("gulp-rename"),
       concat = require("gulp-concat"),
       browserSync = require('browser-sync').create();
 
+
+
+
 gulp.task('copy', async function() {
   gulp.src('./node_modules/bootstrap/dist/css/bootstrap.css')
     .pipe(gulp.dest('./css/'));
@@ -29,6 +33,13 @@ gulp.task('build', async function() {
   console.log("Assets built 🔧 for app/ ");
 });
 
+function mixin() {
+  return gulp.src('./css/_scss/**/*.scss')
+    .pipe(sass().on('error',sass.logError))
+    .pipe(gulp.dest('src/css'))
+    .pipe(browserSync.stream());
+}
+
 function run() {
   browserSync.init({
     server: {
@@ -36,9 +47,11 @@ function run() {
       index: "/index.html"
     }
   });
-  gulp.watch('./css/**/*.css').on('change', browserSync.reload);;
+  gulp.watch('./css/_scss/*.scss', mixin);
+  gulp.watch('./css/**/*.css').on('change', browserSync.reload);
   gulp.watch('./*.html').on('change',browserSync.reload);
   gulp.watch('./js/**/*.js').on('change', browserSync.reload);
 }
 
+exports.mixin = mixin;
 exports.run = run;

package.json

@@ -20,6 +20,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
     "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.0.2",
     "gulp-uglify": "^3.0.2",
     "gulp-useref": "^4.0.1",
     "jquery": "^3.4.1",