Is there a way to configure gulp-sass to compile the actual bootstrap CSS styles instead of just echoing the import statement?

I recently embarked on a project where I wanted to utilize the Sass bootstrap source (.SCSS), apply some customizations (through another .SCSS file), and generate a CSS output.

To achieve this, I decided to employ Gulp in VS2019 with gulp-sass. After going through various tutorials, I created the following gulpfile.js:

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

sass.compiler = require('node-sass');

gulp.task('sass', function () {
    return gulp.src('./Main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

Within my Main.css file, I included the following code snippet:

$theme-colors: ( "primary": #fd7e14 );

@import "//lib/bootstrap-4.4.1/scss/bootstrap";

body {
    color: #5CFF54;
    background: rgb(92,18,18);
    height: 400vh;
}

However, upon generating the file, it seemed to only include the import statement rather than incorporating all the individual styles as expected:

@import "//lib/bootstrap-4.4.1/scss/bootstrap";
body {
  color: #5CFF54;
  background: #5c1212;
  height: 400vh; }

This outcome left me puzzled and seeking guidance on how to properly merge all styles into the final CSS output file. Any suggestions or pointers would be greatly appreciated!

Answer №1

After extensive research online, I have come to understand that the behavior I am experiencing is actually expected due to how I am linking to the source bootstrap.scss file.

To clarify, when referencing it using a web path, it automatically adds an import statement to the resulting .css file. However, if I switch to using a filesystem path like this:

@import "../lib/bootstrap-4.4.1/scss/bootstrap";

it works as intended and includes all the definitions from bootstrap.scss in the generated .css file.

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

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

Here is a link to see how my page looks with the header, table, and footer: https://i.sstatic.net/U6tdO.png If you want to see how it looks when responsive (with smaller width), check out this link: https://i.sstatic.net/zsGkc.png I have encountered 2 ma ...

Determine how the scale of a transform changes over time by calculating the function of elapsed time [ transform: scale(x, y

I am currently working on a container that can be expanded and collapsed simply by clicking on a chevron icon. The functionality to collapse or expand the container resides within a function called transformAnimation. This function code closely resembles t ...

The UL list-style does not seem to be working properly on the Woocommerce checkout page

After creating my e-commerce website and implementing the woocommerce plugin to display products, I encountered an issue. The main menu pages are all showing up with the list-style, but the pages associated with the plugins are not displaying the list-styl ...

Positioning the navigation buttons along the edges

I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...

Unable to change Bootstrap variables within a Next.js project

I'm having trouble changing the primary color in Bootstrap within my NextJS project. I've tried different methods but nothing seems to work as expected. Here is the code snippet from my "globals.scss" file that I imported in "_app.js": $primary: ...

Looking to save a CSS element as a variable

I am working on improving the readability of my code in Protractor. My goal is to assign a CSS class to a variable and then use that variable within a click method. element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")).cl ...

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

Create a fresh CSS class using the Chrome developer tool

Can a brand new CSS class be inserted in Chrome dev tools in this way? .myclass { background-color: yellow; } ...

Creating a CSS Grid with Full-Width Columns and Consistent Margins

Currently, I am attempting to create a responsive grid with 4 columns that expands to the entire width of the screen on desktop displays. However, when I introduce margins to space them out evenly, I encounter an issue where the last column either doesn&ap ...

What is the difference between utilizing npm scripts versus executing direct commands?

I've noticed this interesting behavior recently and I'm keen on understanding it. After installing gulp and the gulp-cli (not globally), I found that when I type the gulp command, I get a response of -bash: gulp: command not found However, when ...

Place the image at right:0px position, but it won't display

I am trying to position an image at the end of a sentence within a div element. No matter what I try, the image always appears next to the end of my text. Here is the code I am using: <div id='xi' class='xc'>Text comes here and ...

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include ...

Animation effects compatible with iOS devices are professionally crafted using CSS

I just implemented a custom hamburger menu with animation using HTML, CSS, and JavaScript on my website. The animation works perfectly on Android devices but not on iOS. Any suggestions for fixing this issue? I attempted to add the Webkit prefix to each p ...

What is the best way to apply styling exclusively to a child component?

I am currently working on a coding project that involves a parent component and multiple child components. My main goal is to adjust the position of a filter icon by moving it down 5 pixels on one specific child component. The issue I am facing is that no ...

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...

The height of a DIV element can vary based on

Looking at this div structure: DIV3 has a fixed height. The nested DIV5 will be receiving content from Ajax, causing its height to change. Additionally, there are some DHTML elements inside it that also affect the height. DIV5 has a fixed min-height set. ...

Does including the "max-height" property within a table result in a height of zero?

Check out the code snippet below (you can also view a demo on JsFiddle): #outer { display: table; height: 200px; width: 100%; background: gray; } #inner { width: 100%; background: blue; max-height: 100%; } <div id="outer" ...

Having difficulty accessing the ::after element on Firefox when attempting to click

I've encountered an issue with my HTML and CSS code - it functions perfectly on Chrome, yet behaves differently on Firefox. button#groupToggle { background: 0 0; border: 1px solid #e6e6ed; color: #222; float: none; margin: 0 0 ...