Bootstrap 4 alpha 6 seems to be ignoring the custom.scss file that I have created

I'm currently in the process of learning Bootstrap 4 (alpha 6) through a tutorial. One of the tasks I need to complete is customizing the original css configuration from Bootstrap.

To do this, I made some changes to the _custom.scss file:

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override 
default values
// without modifying source files.
$green:red;

After modifying the _custom.scss file, I recompiled the bootstrap.scss file using prepros. However, upon reloading the page, I noticed that nothing had changed. The color remained the default green color from the Bootstrap main theme in the generated bootstrap.css file.

Interestingly, when I directly modified the _variables.scss file, it worked perfectly.

In my bootstrap.scss file, the _custom.scss file is imported after _variables.scss:

// Core variables and mixins
@import "variables";
@import "mixins";
@import "custom";

Can anyone offer any insights as to why this is not working as expected?

csshtmlsassbootstrap-4

Answer №1

A solution has been discovered.

The issue stemmed from a misinterpretation of Sass functionality. Initially, it was believed that the variables operated similarly to references in Java. However, this is not the case in Sass, requiring the components utilizing the color variable to be redefined as follows:

$blue:orange;

$brand-primary:$blue;

Answer №2

I encountered a similar problem where my _custom.scss was not working as expected during compilation, but I discovered a simple solution.

To fix it, you can copy the content of _variables.scss and paste it into the _custom.scss file, then remove all instances of !default; throughout the file.

For example, change:

$font-size-h1: 2.5rem !default;

to:

$font-size-h1: 2.5rem;

This adjustment should resolve the issue.

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

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...

htmlcssfooter

What is the best approach in Ruby for managing an unordered list with split columns and counting each

I am currently in the process of strategizing the layout for a webpage utilizing Bootstrap 4 within Ruby on Rails. Specifically, I need to create a sidebar submenu that can expand and collapse, feature bullet points, and include a counter. The desired out ...

htmlcssruby-on-rails

Switch up the like button for users who have previously liked a post

Greetings, I trust everything is going well. I am attempting to implement a feature where users can like a post or article created by others using a button. I have established a const function named "getAPostLikeRecord()," which retrieves a list of users w ...

javascriptcssreactjsfrontend

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

I have a blog website that is created dynamically using Ajax (XMLHttpRequest) and the HTML History API. One issue I am facing is that my content is not searchable by search engines like Googlebot. I know that Google is now able to analyze such sites, but w ...

javascriptjsonajaxhtmlbrowser-history

Output JSON data to an HTML5 table

Here is a code snippet to retrieve data: function fetchInformation(){ $.get('http://mywebsite.net/getFile.php', function(data) { var result = JSON.parse(data); } The returned JSON data is as follows: Object {0: "11", 1: ...

javascriptphpjsonhtml

3 column layout fails to inherit parent DIV height

<div class='main_container' style='overflow:hidden; height:100%; height: auto !important; min-height:100%; width:100%;'> <div class='float_left' style='width:100px; height:100%;'> </div> ...

htmlcss

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

javascripthtmlangularjs

multiple elements sharing identical CSS styling

For each component, I made separate CSS files and imported them accordingly. However, despite the individual styling efforts, all components seem to have the same appearance. I specifically worked on styling an image differently for two components, but w ...

javascripthtmlcssreactjsstyles

Customize the Underline Color in MaterialUI Select Component

I'm experimenting with MaterialUI and trying to figure out how to customize the underline and text color of the Select component when an item is selected. Currently, the underline and label appear blue after selection with a gray background. Is there ...

cssreactjsmaterial-ui

Tips for resizing images to fit within a TD cell in an HTML table

Currently, I have an issue with the image display within a TD element. Despite setting a specific width for the TD, the image appears to be wider than intended. Could you offer a solution to this problem? ...

htmlcss

Ways to modify the jquery script to display on page load rather than on scrolling action

Currently in the process of working on my site, www.runebs.dk. Utilizing a script to activate information for each project. JS.. $('.showHide').on('click',function(){ $(this).toggleClass('active'); $( '#subHead ...

jquerycss

Perform a single click and a double click on an anchor element in the document

I am attempting to implement two actions when a user clicks on an anchor tag. The anchor tag will contain a video link. My goal is for the URL to open in a new window when the user single-clicks on the anchor tag, and for the use of the HTML5 download attr ...

javascriptjqueryhtml

Having trouble displaying SVG elements in Material UI

Currently, I am faced with an issue while trying to display a .svg file in the header of a drawer using Material-UI and create-react-app. Instead of the expected .svg image, all I see is a broken image rendering. Any assistance on resolving this problem ...

cssmaterial-uicreate-react-app

Having trouble implementing button functionality in a web app using JS, jQuery, HTML, and CSS along with an API integration

I am currently developing a web search engine that utilizes the Giphy API... However, I've encountered difficulties with the button function. I have created buttons to modify the page format and adjust the number of search results displayed.... The We ...

javascripthtmljquerycss

Using jQuery to dynamically update the CSS of one table column depending on the attribute of another column

Welcome to my HTML table <!DOCTYPE html> <html> <body> <table> <thead> <th>Title1</th> <th>Title2</th> </thead> <tbody> <tr> <td><input type="checkbox" id=0 /></td> ...

javascriptjqueryhtmlcss

Iterate through a JavaScript object while preserving the key along with its corresponding value

var info = { 2016-09-24: { 0: {amount: 200, id: 2}, 1: {...} }, 2016-09-25: { 0: {amount: 500, id: 8}, 1: {...} } } In order to display the data stored in the object above, I want to create a view that looks like this: "**" will r ...

htmlreactjsobject-literal

Struggling with making a rest API request to render HTML

I am trying to retrieve the holders value from a REST API and display it on my website using HTML code. I've attempted the following code, but I'm having trouble actually printing the value. <!DOCTYPE html> <html> <body> <p& ...

htmlweb

CSS: Struggling to Keep Footer at the Bottom of the Page

I've been struggling to get my footer to stick to the bottom of the page, but I just can't seem to make it work. I've searched online for solutions with no success, so I thought I would ask for help here. http://jsfiddle.net/f54eq3w8/ Here ...

css

Tips for showcasing a string value across various lines within a paragraph using the <br> tag for line breaks

I'm struggling to show a string in a paragraph that includes tags to create new lines. Unfortunately, all I see is the br tags instead of the desired line breaks. Here is my TypeScript method. viewEmailMessage(messageId: number): void { c ...

javascripthtmlangulartypescript

Error: AJAX encountered an unexpected token

An error message has appeared stating: Uncaught SyntaxError: Unexpected token : This error relates to the following line of code: data: userCoupon: $('#couponCode').val(), Here is the script in question: $(function() { $("#signInButton2"). ...

javascriptjqueryhtmlajaxpost