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

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

htmlcss

In order to showcase an image ahead of another (stay tuned),

Help! I'm facing a dilemma here. I have an abundance of adorable animal images with unique facial expressions, but there's one problem - the eyes are hidden! I desperately want to showcase those captivating eyes. This is what my code looks like. ...

htmlcss

Switch tab colors when clicked

I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed. I have attached 2 screenshots showing the code and design. Thank you. Second ...

htmlcssbootstrap-4

I'm feeling a bit lost on how to bring my random quote generator to life

I'm attempting to add animation to my random quote generator by making it look like another card is being flipped on top of the existing one, similar to a deck of cards. With limited coding knowledge, I followed a tutorial and made some adjustments to ...

javascriptcssrandomjquery-animatecss-animations

Error: When utilizing ReactJS, a TypeError occurs stating that the property 'GlobalWorkerOptions' is unable to be read because it is undefined in the PDFJS.GlobalWorkerOptions

I am encountering the error message "TypeError: Cannot read property 'GlobalWorkerOptions' of undefined" in PDFJS.GlobalWorkerOptions.workerSrc. This is my code snippet: import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.work ...

reactjspdfnpmpdf.jsreact-pdf

Unexpected XML Parsing Behavior Found in the NPM Package for XML-Flow

Exploring the Issue Currently, I am utilizing the xml-flow npm package for XML parsing through streams. However, I have encountered an unexpected parsing behavior. The goal is to parse a large XML file using a repeating xml node specified from the UI. De ...

node.jsnpmxml-parsingxml-to-json

Is it possible to incorporate a label within a dropdown menu (<select>)?

How can I add a label inside a select box using Bootstrap? Here is an example: Before selecting an option After selecting an option, the label should appear in a small size like this: After selecting an option : <div class="form-group"> & ...

javascripthtmlcssbootstrap-4

Unable to adjust the margin-bottom attribute in CSS

Currently, I'm in the process of developing a website and attempting to build the client-side without using any frameworks. However, for some reason, I am facing difficulty in changing the margin-bottom property. My goal is to create space between the ...

htmlcsswebfrontend

Create a div element containing a captivating background image that automatically scales to fit any browser window

Currently, I am facing a challenge with scaling background images within a shared div (framework) so that they can resize along with the browser. I have searched for solutions involving Javascript, but none seem to address my specific case. Any assistance ...

htmlcss

What is the process of adding a private Git library to an npm project?

I am currently working on a project that has its own private project library accessible directly to me at . In the package.json file, it is required like this: "dependencies": { "@some-project/some-utils": "0.1.42", ...

npmgitlabyarnpkg.npmrc

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

Erase the border around the color selection field

Here's a demonstration: http://jsfiddle.net/WpJRk/ I've incorporated a color picker into my webpage using the new input type "color": <input type="color"> However, I've noticed that there is an unwanted black border within the eleme ...

htmlcssgoogle-chrometwitter-bootstrap

Creating a border indentation for a table row using the <tr> tag

In my database, there is a table that shows the parent-child relationship. Check out this link for more details The HTML structure of the table is as follows: <table> <tr class="parent_row"> <td >1</td> <td>2</t ...

css

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

javascripthtmlcss

The Bootstrap 5 navigation bar does not extend to the full width of its parent

While working on a Bootstrap navigation inside a container, I encountered an issue where the navigation bar was not expanding to match the width of the container. It seemed like the padding had to be manually adjusted to fit properly. Below is the code sn ...

javascripthtmlcssbootstrap-5

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

What is the best way to incorporate a Bootstrap 4 container within a container-fluid? how can we ensure that text is always contained within the blue section? ...

javascripthtmlcssbootstrap-4

My AngularJS app is refusing to launch when using the npm start command

Yesterday, I was working through the AngularJS tutorial for angular-phonecat on my MacBook and everything was running smoothly. However, both npm start and npm test required sudo to function properly, which seemed odd. Today, I decided to clone the origin ...

angularjsnpm

Error in Jhipster production build

I'm facing an issue with generating my JHipster application war using mvnw -Pprod. The error I encounter in the console is shown here: https://pastebin.com/3wLwy2x4 Here are the dependencies from my package.json file: https://pastebin.com/txnATG6M ...

dockernpmwebpackjhipsteryarnpkg

Having difficulty with the installation of reactstrap

If you encounter issues with installing react-icons, reactstrap, and react-toastify C:\Users\Anupam K Krishnan\Desktop\React20\four-tictactoe>npm install react-icons reactstrap react-toastify npm ERR! code ERESOLVE npm ERR! ...

node.jsreactjsnpm

What causes my `` to function intermittently?

I've been experimenting with adding attributes and styling to elements. Sometimes my code works perfectly fine, while other times it doesn't produce the desired output. Here's an example of when it works: $('.card-text') .text( ...

javascriptjqueryhtmlcsstwitter-bootstrap