Default file is still generated by Sass even when variables are modified

Currently, I am in the process of modifying some variables for my customized version of Bootstrap. At the moment, I have the Bootstrap SCSS files along with my own variables file. This is how my file appears:

@import "/path/to/bootstrap";
$blue:    #42a5f5;
$indigo:  #5c6bc0;
more styles here…

Despite this setup, when I execute 

sass /path/to/custom.scss /path/to/output.css
, the output still reflects the default Bootstrap files as follows:

:root {
  --blue: #007bff;
  --indigo: #6610f2;
more styles here…

I am puzzled as to why this is happening. Any insights into this issue?

csstwitter-bootstrapcommand-linesassbootstrap-4

Answer №1

As outlined on the Bootstrap 4 documentation:

When it comes to variable overrides in Sass files, you have the flexibility to place them before or after the default variables in the same file. However, if you are overriding variables across multiple Sass files, make sure your overrides are declared before importing Bootstrap’s Sass files.

If you are crafting your very own custom.scss file, it should be structured like this: 

// Begin with your custom variable overrides
$blue:    #42a5f5;
$indigo:  #5c6bc0;

// Followed by Bootstrap and its default variables
@import "/path/to/bootstrap";

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

Apply CSS styling to the v-html output

I am trying to enhance the style of HTML code using a v-html but have been struggling with finding a working solution so far. Can anyone help me out? :( Below is my code snippet: Template : <div class="para" v-html="value" /> Script : exp ...

htmlcssvue.jssassvuejs2

Guide to display half of an image and allow for full image viewing upon mouse hover

After creating my bootstrap 4 website, I encountered an issue with the code below where only half of the image is displayed initially due to a conflict in the code. It also fails to work properly when moving the mouse after shifting the whole image from ri ...

javascripthtmlcssbootstrap-4

Aligning HTML headers in a horizontal manner

Can anyone help me out here? I have a div containing 4 elements that are currently stacked on top of each other. I want them to be aligned horizontally instead. The div's ID is #ninesixty. Thank you in advance! HTML <header> <div id="ni ...

csshtmlweb

What would you suggest as a more effective method for preventing content overlap during multi uploads?

Recently, I was working on a Wordpress site and used the Ninja Forms plugin to create a form. One of the challenges I encountered was styling the file upload button. After some research, I came across a tutorial that provided a great solution that worked a ...

jquerycssformsfile-upload

Is there a way to apply multiple colors to a h1 tag in HTML?

I need help with adding multicolor to a heading on my website using CSS. I am trying to define colors using the span element with different classes for each text section. However, the colors are not showing up as expected and there seems to be spacing issu ...

htmlcss

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

javascripthtmlcssajaxfullcalendar

Refresh the div by clicking it

$(window).load(function() { $("#Button").click(function() { alert('clicked') $("#div").load(" #div > *"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script ...

javascriptjqueryhtmltwitter-bootstrap

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

phpjqueryhtmlcss

Alert: Font preload was not utilized within a short timeframe after the window's load event

I've been working on optimizing the loading speed of fonts on my website, so I added the following: <link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.woff' | prepend: site.baseurl | prepend: site.url }}" as="font" type="fo ...

cssgoogle-chromefonts

Using jQuery, organize tables by the value of their td class

, I am attempting to organize various td elements within one or more trs based on their respective classes. These are all housed in multiple table elements with the classname "hosts". Currently, my jQuery abilities are lackluster and I am struggling to sor ...

jqueryhtmlcss

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

javascriptphphtmlcsshead

Height of Bootstrap 4 footer aligned to the bottom

I've made a template that sets the height of the footer to 120px and specifies the line-height as well. Here is an example: .footer { height: 120px !important; line-height: 120px !important; } <!doctype html> <html lang="en"> &l ...

htmlcsstwitter-bootstrapbootstrap-4

Using an HTML5 image icon as an input placeholder

Is there a way to incorporate an image icon into an input placeholder and have it disappear when the user starts typing, across all browsers? In trying to achieve this, I successfully implemented a solution for webkit (Safari+Chrome) using ::-webkit-input ...

csshtmlcross-browserplaceholder

FlexBox responsive items that are expandable getting cut off

I am currently working on creating a row of expandable items. While I have almost achieved the desired behavior, there are a few issues that I need help with: On Desktop, the items are cut off and not fully visible. On Mobile, half of the items are missin ...

htmlcssreactjsflexboxtailwind-css

The functionality for searching and paginating in Bootstrap tables seems to be malfunctioning

I am currently utilizing Node.js in conjunction with bootstrap 4, and for displaying data in an ejs file, I have incorporated a bootstrap table from the following link: https://datatables.net/examples/styling/bootstrap4.html However, I encountered an iss ...

node.jshtml-tablebootstrap-4

Change the background color of a Bootstrap dropdown when toggled

I recently created this code snippet: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdo ...

htmljquerycssbootstrap-5

What is the process for incorporating a new view or route in Express?

I am a beginner in this field and eager to learn as much as I can. Currently, I am utilizing the template available at https://github.com/primaryobjects/Node.js-Bootstrap-Starter-Template. Things were going smoothly until I attempted to add a new page, whi ...

node.jstwitter-bootstrapexpress

Enhancing the background of a website with the power of CSS

I am looking to create a customized table without the balls/pots in it. The number of rows on the y-axis will vary depending on the number of names I have, and can be more or less. The values on the x-axis are determined by a parameter included in the URL ...

javascriptjqueryhtmlcss

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

css

Click event in jQuery to change the background color of <td> element

I'm still getting the hang of jQuery, so please bear with me. :) The purpose of this code is to color a square with the selected color when clicked if it's white, and turn it back to white if it's already colored. It works fine except for a ...

jquerycsscolors