Troubleshooting Gulp Conversion of Bootstrap-Material Scss to CSS: Error Message "Import Not Found"

Upon completing my gulp task styles, I encountered the following error:

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 confirmed that the files are located where they should be. Therefore, I am uncertain about what could be causing the issue. This is the structure of my project:

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']);
});

Excerpt from 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

After manually setting the path for functions (inside Bootstrap's _variables.scss), the task was successful and moved on 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

This hardcoded solution doesn't seem entirely satisfactory. The root cause of why it isn't working out of the box remains unclear. Could it be that the tilde symbol is not being recognized somehow?

Original variables.scss

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

Answer №1

Due to the absence of the gulp-sass package, you can easily rectify this by running npm install --save-dev gulp-sass. Ensure that you execute this command in the same directory where your package.json is located.

UPDATE

IMPORTANT: There should only be one node_modules folder within your Project directory and not within the static folder.

If there are multiple node_modules folders and you run commands in the static folder, unnecessary dependencies will be injected there. Make sure to have just one node_modules directly inside your Project.

Then, I suggest uninstalling any previously installed packages and then installing bootstrap and other desired packages using these commands:

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

Your directory structure should resemble the following:

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

You have flexibility in managing files within the static folder.

In your gulpfile.js, remember to update the file paths like so:

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

It should now look like this:

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

In the main.scss file, import Bootstrap as follows:

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

Refer to this link for issues with installing bootstrap-material design.

If problems persist, everything should compile smoothly as demonstrated in this image: https://i.stack.imgur.com/mYQXA.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The relationship between formatting context and atomic inline-level boxes is crucial for understanding

Check out this link for more information on inline boxes An inline box is a unique element that falls under the category of both inline-level and participates in its containing inline formatting context. When a non-replaced element has a 'display&ap ...

htmlcssflexboxw3c

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

javascriptjqueryhtmlcss

I encountered the issue: "The specified resource is not a valid image for /public/logoicon/logoOrange.png, it was received as text/html; charset=utf-8."

I encountered an issue when trying to incorporate a PNG or SVG file into my code. What steps should I take to correct this error and enable the images to display properly? import Head from 'next/head' import Image from 'next/image' impo ...

javascripthtmlcssbrowsernext.js

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

jquerycss

Issue encountered while trying to install the Atom terminal package

Operating System: ~ ❯❯❯ sw_vers ProductName: Mac OS X ProductVersion: 10.10.5 Text Editor - Atom: ~ ❯❯❯ atom --version 1.4.1 Atom Package Manager (apm): ~ ❯❯❯ apm --version apm 1.5.0 npm 2.13.3 node 0.10.40 python 2.7.10 git 2.7 ...

node.jsnpmatom-editornode-gyp

Issue: Incompatibility in metadata versions detected for module .../ngx-masonry/ngx-masonry.d.ts. Level 4 version identified, whereas level 3 version

When using ngx-masonry, I encountered the following error message- ERROR in Error: Metadata version mismatch for module .../ngx-masonry/ngx-masonry.d.ts, found version 4, expected 3 Specifications: Angular 4 ngx-masonry 1.1.4 ...

javascriptangulartypescriptnpmnode-modules

Guide to incorporating flash into a form similar to the method used on http://www.mediafire.com

I'm looking to integrate a flash upload feature into my index file, but I'm not sure how to do it. Here is the link to the flash uploader: . I want it to work similar to how uploading works on when you click on UPLOAD. Thank you for any assistan ...

phpjquerycssflash

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

How to use jQuery Animate to create a step-by-step animation with image sprites?

I'm working on creating an image sprite using jQuery and I'm curious if it's feasible to animate it in steps rather than a linear motion. I initially tried using CSS3 animations, but since IE9 is a requirement, the animations didn't wor ...

javascriptjqueryhtmlcssjquery-animate

After I finish my website, how should I handle the Gulp / NPM dev dependencies?

As I dive into learning Gulp and Webpack, I've come across a common question that seems to be overlooked in tutorials - what do we do with all the development dependencies once our project is finished and ready for deployment? The node_modules folder ...

node.jsnpmdeploymentwebpackgulp

What is the method for identifying the name of a CSS Variable currently in use?

Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...

javascriptcssvariables

The scrollbar CSS appears to be missing on iPhone browsers Chrome and Safari

After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this simple example: .scroller { background: lightblue; height: 1000px; max-width: 400px; margin: 90px auto; padding: ...

htmlcss

Guide to implementing a universal animated background with Angular components

I'm having trouble figuring out why, but every time I attempt to use a specific code (for example: https://codepen.io/plavookac/pen/QMwObb), when applying it to my index.html file (the main one), it ends up displaying on top of my content and makes ev ...

cssangular

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...

javascriptjqueryhtmlcss

Photos inside a flexbox do not resize correctly

When placing 2 images inside a flexbox with the column direction, I anticipated that the images would resize accordingly when adjusting browser window size. However, this is not the case. Regardless of the CSS styles applied, I am unable to maintain the o ...

htmlcss

Conflict with choosing options identified when using Select Box on IOS iPad mini

I am currently attempting to display a select box with scrolling on an iOS iPad mini. Issue: The options are not appearing inside the select box, instead they are overflowing outside of it in the popover. CSS .indicators_geography { font-size: 12px; ...

ioshtmlcssipad

Verify whether the document includes a class that closely matches the provided string using Javascript

I need help identifying elements that include the letters 'ad'. For example: <iframe class="container" /> <!-- Not relevant --> <a class="adp" /> <!-- Relevant --> <a class="adleft" /> ...

javascripthtmlcss

When attempting to run npm start, an error message appears indicating a failed compilation due to the inability to resolve

Error compiling ./node_modules/jest-serializer/build/index.js Module not located: Unable to find 'v8' in 'C:\Users\Desktop\reactapp\react-project\node_modules\jest-serializer\build' This issue arose du ...

reactjsnpmnode-modules

Menu options displayed with the help of HTML5 tags

Currently, I am experimenting with creating an interactive HTML5 dropdown menu in my spare time. While researching on W3Schools about dropdown menus, I noticed that all of them utilize CSS classes and id's for styling. This is a snippet of the HTML c ...

htmlcssdrop-down-menunavdropdown

How to Make a Div Tag Fade Effect with JavaScript in an External File

*** New Team Member Notice *** I'm currently working on an assignment and trying to implement a simple fade effect on a box. While it seems like this should be straightforward, I'm encountering some obstacles. Currently, the button causes the bo ...

javascripthtmlcssfadeinfadeout