The mixin 'media-breakpoint-only' is not defined

Recently, I decided to delve into coding with Bootstrap4 and Sass.

I made sure all the necessary configurations were in place for my environment/project setup:

including

ruby 2.3.1p112 (2016-04-26 revision 54768) [i386-mingw32]

and a list of installed gems (previously experimented with bootstrap 3):

autoprefixer-rails (6.3.6.2)
bootstrap (4.0.0.alpha4, 4.0.0.alpha3)
bootstrap-sass (3.3.7, 3.3.6)
breakpoint (2.7.0)
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5)
sass (3.4.22)
sass-globbing (1.1.5, 1.1.0.pre.0)
sassy-buttons (0.2.6)
sassy-maps (0.4.0)

In my styles.scss file:

@import "compass/css3";
@import 'variables/.';
@import "bootstrap";

In config.rb:

require 'compass/import-once/activate'
require 'bootstrap'
require 'sass-globbing'
require 'breakpoint'

Compass seems to be functioning well and generating styles.css:

/* line 18, c:/Ruby23/lib/ruby/gems/2.3.0/gems/bootstrap-4.0.0.alpha4/assets
/stylesheets/bootstrap/_normalize.scss */
body {
  margin: 0;
}

However, things go awry when utilizing some bootstrap mixins:

Error: Undefined mixin 'media-breakpoint-only'.

What crucial detail have I overlooked?

Answer №1

You seem to have all the necessary components, but in the incorrect order. The mixin media-breakpoint-only (a Bootstrap Sass function/mixin) needs to be included before Compass can work properly. Therefore, you must rearrange the order of your code. It should look something like this:

  1. Require Breakpoint
  2. Require Bootstrap
  3. Require Compass

The same order applies for the styles.scss file; Bootstrap should be imported before Compass. If this solution doesn't resolve the issue, consider trying a different sequence. Keep me updated on your progress.

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

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

Ruby program for capturing screens encounters errors when utilizing Selenium Webdriver

I'm struggling to successfully implement a basic screen capture function in my code. The script I have so far is as follows: require 'selenium-webdriver' width = 1024 height = 728 @websites = Array.new file = open('websites.txt&a ...

Dropdown Menu in Bootstrap fails to display any items

My customized bootstrap navbar dropdown is behaving oddly in my custom navbar. Any thoughts on why this is happening and how to resolve the issue? The screenshot below illustrates the problem - the dropdown menu items are not visible unless I hover over th ...

Evolving characteristics of Bootstrap popover

I am currently working on a text field and button setup where I have implemented a popover feature using Bootstrap. This is the code snippet I am using: function displayPopover() { $("#text").popover("show"); } The popover appear ...

Dawn Break Alarm Timepiece - Online Platform

My buddy recently purchased a "sunrise alarm clock" that gradually brightens to mimic a sunrise and make waking up easier. I had the thought of replicating this effect with my laptop, but I've been facing issues with getting the JavaScript time funct ...

I find it confusing how certain styles are applied, while others are not

Working on my portfolio website and almost done, but running into issues with Tailwind CSS. Applied styling works mostly, but some disappear at certain breakpoints without explanation. It's mainly affecting overflow effects, hover states, and list sty ...

Alignment of card images

Is there a way to keep the images in my cards fixed at the top of the card body? I've tried using bottom: 0 but it's not working as expected. The card body has a fixed height and is fixed to the bottom, which is functioning correctly. However, si ...

Activate anchor classes in several anchor link menus simultaneously

I have a one-page website with multiple menus filled with anchor links. Here is an example of what they look like: <ul> <li><a href="#home" class="active" onclick="closeNav();">Home</a></li> <li><a href="#abo ...

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script ...

Can JSS support creating variables similar to Sass?

Currently, I am developing a project in React and utilizing Material-ui with JSS for styling. In Sass, we have the ability to define variables like $color: rgb(255, 255, 255) for later use. I am curious if it is possible to implement variable usage simi ...

Troubleshooting the "shrink-to-fit=yes" problem with the viewport meta tag in a NextJS 14 application router

My goal is to make my NextJS 14 app responsive and scale down on devices with a width less than 500px. Previously, I used min-width: 500px; in the CSS of the body tag and included a meta tag in the <head>: <meta name="viewport" content= ...

What could be causing my CSS formatting from a linked style sheet to not be applied properly?

I've been trying to incorporate a YouTube video into my webpage using a CSS stylesheet, but I can't seem to get the video to display properly .youtube-video iframe, .youtube-video img, .youtube-video-2 iframe, .youtube-video-2 img { positi ...

Resizing the container div to perfectly fit the displayed React component

Is there a way to render a component with its style and position defined by specific cases without having to create a container that takes up the entire body? I want the styles of the container to match those of the component, without the need for the cont ...

Switch up the background image when hovering over it

Could the proportions of the image be contributing to the issue at hand? #menu { background: black; width: 100%; height: 45px; } #menu ul { text-decoration: none; list-style-type: none; } #menu li { text-decoration: none; display: inline; font-size: ...

How can I modify the border color of a Material Ui TextField component?

I've been struggling to figure out how to customize the color of the TextField border. I want to change it from the default grey to black. Below is a simplified version of my UpdatePage.js file: const useStyles = makeStyles(() => ({ updatePage ...

One column stretching all the way to the window's edge while the other column stays contained within its container

Looking to design a two-column layout where the left column takes up 40% of the container and aligns with it, while the right column expands all the way to the window edge. I managed to achieve this using position:absolute, but I'm curious if there&ap ...

Incorporate a dynamic fading effect for text and images using JQuery

I successfully implemented a Crossfade effect using Jquery: function doAnimationLoop(o, n, t, i, a) { fadeInOut(o, n, t, i, function() { setTimeout(function() { doAnimationLoop(o, n, t, i, a) }, a) ...

Adjust the height of the list when including or excluding floated list items that are not in the final row

Within my ul are li elements with varying widths that wrap around inside a container into multiple rows. When removing an li element from the ul, I want the container's height to adjust dynamically in case a row is eliminated. If the removal happens ...

In relation to CSS and HTML

I recently started working on a website built with HTML/CSS and encountered an issue with links highlighting when hovered over. The problem arises from the main image on the homepage containing an embedded link, causing the area under it to also highlight ...

Make the background image come to life by animating it from the bottom to the top in

Upon landing on a page, I aim for the background image to initially focus on the bottom and then pan up to the top before returning back down in a continuous loop. The code I have set up is as follows: <body> <div id="container"></div&g ...