Search code examples
cssnpmsassgulp

Converting Bootstrap-Material Scss to CSS Using Gulp Gives Import Not Found

I get the following error after running my gulp task styles:

Error in plugin "sass"
Message:
    static\node_modules\bootstrap-material-design\scss\_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/functions.        
on line 56 of static/node_modules/bootstrap-material-design/scss/_variables.scss
        from line 2 of static/node_modules/bootstrap-material- design/scss/_core.scss
        from line 3 of static/node_modules/bootstrap-material- design/scss/bootstrap-material-design.scss
@import "~bootstrap/scss/functions"; // from bootstrap node_module
 ^

I have checked that the files are where it's supposed to look. So I am not sure what is wrong. This is my project structure:

Project/
  gulpfile.js
  package.json
  package-lock.json
  node_modules/
    bootstrap/
    bootstrap-material-design/
    gulp-sass/
    gulp/
  static/
    node_modules/
        bootstrap/
           scss/
             _functions.scss
        bootstrap-material-design/
           scss/

        gulp-sass/
        gulp/

. 

//gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

//style paths
var sassFiles = 'static/node_modules/bootstrap-material-design/scss/**/*.scss',
    cssDest = 'static/node_modules/bootstrap-material-design/dist/css/';

gulp.task('default', function () {
    console.log('GULP GULP GULP')
});

gulp.task('styles', function () {
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch', function () {
    gulp.watch(sassFiles, ['styles']);
});

Partial package.json

  "dependencies": {
    "bootstrap": "^4.1.1",
    "bootstrap-material-design": "^4.1.1",
      },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-ng-annotate": "^2.1.0",
    "gulp-uglify": "^3.0.0"
  }

EDIT

When I hardcoded the path to functions (inside bootstraps _variables.scss), it worked and skipped over to the next import it couldn't find.

Error in plugin "sass"
Message:
    static\node_modules\bootstrap-material-design\scss\_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/variables.
        on line 57 of static/node_modules/bootstrap-material- design/scss/_variables.scss
        from line 2 of static/node_modules/bootstrap-material- design/scss/_core.scss
        from line 3 of static/node_modules/bootstrap-material- design/scss/bootstrap-material-design.scss
 @import "~bootstrap/scss/variables"; // from bootstrap node_module
  ^

variables.scss

56: @import "C:/Users/PC/Documents/Git/Project/static/node_modules/bootstrap/scss/functions"; // from bootstrap node_module

Grr, this hardcoding doesn't really seem like a solution to me. Not sure why it's not working out of the box. Is the tilde not being recognized or something?

original variables.scss

56: @import "~bootstrap/scss/functions"; // from bootstrap node_module
Solution

  • because of gulp-sass package not installed yet you can just do npm install --save-dev gulp-sass and also make sure to run this command in the folder where package.json is there

    UPDATE

    IMPORTANT you should have only 1 node_modules folder which it should be inside your Project folder not inside static folder.

    if you have more than 1 node_modules if you run inside static it will inject your dependencies there which is not needed for your case.

    So please make sure to have only 1 node_modules direct into your Project

    THEN I would recommend that you uninstall the packages that you installed and install bootstrap and the other packages that you want

    npm install --save bootstrap
npm install --save material-design

    then your structure will be like that

    Project/
  gulpfile.js
  package.json
  package-lock.json
  node_modules/
    bootstrap/
    bootstrap-material-design/
    gulp-sass/
    gulp/
  static/
   proejctFiles.scss

    For sure up to you how to manage your files inside the static folder

    Then in your gulpfile.js you have to edit this path

    //style paths
var sassFiles = 'static/node_modules/bootstrap-material-design/scss/**/*.scss',
    cssDest = 'static/node_modules/bootstrap-material-design/dist/css/';

    IT should be

    //style paths
var sassFiles = './static/main.scss',
    cssDest = 'static/dist/css/';

    inside main.scss i import boostrap like that

    @import "./node_modules/bootstrap/scss/bootstrap";

    problem with installing bootstrap-material design

    as its up there is a problem for installing the bootstrap material design

    then everything will be compiled fine like that

    enter image description here