Custom-styles.scss doesn't function as intended

Topic: Custom-styles.scss doesn't function as intended

Stonedsludge asked 3 years ago

Expected behavior

Placing my own scss into _custom-styles.scss will result in the css changing.

As I understand it, if I have a totally empty file - meaning no imports or anything, fully blank at line 1 - named _custom.scss located in the scss directory and I place the following code in it:

@include media-breakpoint-between(lg, xl) {

.zebra {

width: 10vw;

}

mdb-free.min.css should be automatically modified to include the new scss-converted-to-css. That change should be reflected after the task runner does its thing, without me doing anything further. Using gulp as task runner (shot of gulpfile below). Here's how I think the "flow" of the process works ...

The mdb-free.min.css that is linked in my index.html is constantly updated by the tasks gulp is running...gulp-cssmin and gulp-sass specifically. I know this is (at least partially) working because it does the job right in all other respects; I'd have no mdb styling at all if it wasn't.
mdb-free.scss @imports the rest of the scss modules, including _custom-styles.scss. So, with just bootstrap.min.css and mdb-free.min.css <link>s in the <head>, this should all work!

Actual behavior

It only sometimes works! First, I get an Error: undefined mixin that isn't always thrown and I can't reproduce the conditions that allow it to work. Example using the code above: the width: 10vw; works, no error is thrown, the browser updates and the sizing is applied. Without changing anything else in the file, if I set width: 12vw; the browser will reload but I'll get an Error: undefined mixin and the element being altered reverts to its unstyled form... sometimes. Other times it will work for a few changes and then start acting wonky again.

Resources (screenshots, code snippets etc.)

Here's what I can remember trying: 1. @importing the other scss files into _custom-styles.scss. 2. Eliminated the "maybe I messed this up when altering mdb-free.scss for the production environment" by returning mdb-free.scss to it's default state. 3. Made sure that the mdb-*.scss files contain @import "custom-styles"; where appropriate, and that any newly-minified versions are in dist/css with all the other css.

I know I'm missing something small, but I'm out of options after literal weeks of struggle. Someone help! Sorry for the wall of text, more data is (almost) always good, right?

Relevant screenshots attached Gulpfile screenshot custom-styles.scss screenshot Error screenshot mdb-free.scss screenshot