How to compile bootstrap-material-design sass files with gulp?

Question

I have been struggling with gulp to compile scss files into css.

I havn't used gulp and sass very much and the docs of this particular framework are not helpful on this matter.

My gulpfile looks like this

var gulp = require('gulp');
var sass = require('gulp-sass');

var scssFile='assets/scss/bootstrap-material-design.scss';
gulp.task('sass', function () {
  return gulp.src(scssFile)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('_site/assets/css'));
});

I did npm install gulp gulp-sass --save-dev to install libraries.
And I copied the content of this folder https://github.com/FezVrasta/bootstrap-material-design/tree/master/scss into a folder named "scss"

Now running gulp sass gives me this error:

[13:54:37] Using gulpfile ~/workspace/imb4/gulpfile.js
[13:54:37] Starting 'sass'...
Error in plugin "sass"
Message:
assets/scss/_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/functions.
on line 56 of assets/scss/_variables.scss
from line 2 of assets/scss/_core.scss
from line 3 of assets/scss/bootstrap-material-design.scss
>> @import "~bootstrap/scss/functions"; // from bootstrap node_module
^
[13:54:37] Finished 'sass' after 50 ms

Is this because I copied the wrong scss folder ?

Do I need to npm install [email protected]? (I did try that, but I can't require() it because it needs jQuery or something.)

Do I need to reference the scss files that are in the node_modules?

The error says it needs a bootstrap folder, do I need to download bootstrap scss files manually and copy them in the folder? Do I have to do npm install bootstrap?

It's probably a stupid question, but I'm already stuck on this for hours now.

I changed "~bootstrap/" with "../../node_modules/bootstrap/" in _variables.scss and _core.scss and it worked. But that seems like a hack: I should not be modifying those files, should I? — stallingOne

James Fooks James Fooks · Accepted Answer · 2018-09-04T17:51:54

Clone the folder in the link as is to your assets/scss

Your gulpfile should call your main entry sass file style.scss - in your case "bootstrap-material-design.scss"

this sass file contains only one import - @import "core";

_core imports _variables.scss, _mixins.scss etc...

your _variables.scss file has

@import "~bootstrap/scss/functions"; // from bootstrap node_module
@import "~bootstrap/scss/variables"; // from bootstrap node_module

So its looking for a node_modules/bootstrap folder,

npm install bootstrap

will add it.

when you run your gulp task and the sass starts compiling it needs the full bootstrap files located in node_modules/bootstrap/scss/ folder to compile correctly.

your "bootstrap-material-design.scss" will first import _core, _core will then import _variables, _variables imports a few custom files from another variables folder within the scss directory before looking at your node_modules folder (on line 56) with @import "~bootstrap/scss/functions";

your gulp task will pick up your sass files references (anything with an underscore is compiled at build time) - That spits out a plain css file where ever you set the destination to be eg "assets/css/style.css" which is the file you should reference in your html after build.

if this is still not happening for you you may just have a simple path issue to resolve. bootstrap versions can differ on sass fodler structure so double check your path in node_modules/bootstrap/scss/ actually has a functions folder.

If it does try @import "./node_modules/bootstrap/functions";

If it does not then you may need to check your version of bootstrap.

Eg - with bootstrap 4.1.1 they are imports not folders @import '~bootstrap/scss/_functions'; @import '~bootstrap/scss/_variables';

How to compile bootstrap-material-design sass files with gulp?

1 Answers