`Is there a solution for the "Undefined Variable" error in node-sass?`

There seems to be an issue with node-sass that I'm encountering...

I have the following files: - app.scss - variables.scss - style.scss

app.scss

@import 'variables';
@import 'style';

variables.scss

$green: #38c172;

style.scss

button{
    background-color: $green;
    }

Although it functions correctly, when I check my app.css file, I find:

button{
    background-color: #38c172;
    }

Despite this working, I keep encountering the same error... why is this happening? It's so frustrating!

Answer №1

The message states that there is an error on line 42 of the header.scss file.

The issue appears to be with the code "border-bottom: 3px solid $green;". Make sure you have correctly imported variables for the header.scss file.

Answer №2

Great news! I have addressed that issue. Make sure to prefix all files with an "_" except for app.scss.

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

What advantages does em have over px in the Zurb Foundation's responsive grid system?

The Zurb Foundation Media Queries are specified in em units: $small-range: (0em, 40em); /* 0, 640px */ $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063em, 90em); /* 1025px, 1440px */ $xlarge-range: (90.063em, 120em); /* 1441px, 1 ...

nodemon running multiple instances in npm script

Here are the npm scripts I'm using: "build": "tsc -w -p ./src/server", "run": "nodemon --watch ./dist/server ./dist/server/app.js", "start": "concurrently --kill-others \"npm:build\" \"npm:run\"" When I try to start t ...

How can I properly display each option of a ngx-bootstrap-multiselect on a separate row?

After upgrading my Angular 8 project to Angular 9, I decided to experiment with the ngx-bootstrap-multiselect plugin. I noticed that the way the items are displayed on a single line is causing some display issues, such as checkboxes appearing to the right ...

how can you make keyframe animation pause at the last stage?

Here is an example of utilizing CSS animations: .show-left-menu { -webkit-animation-name: leftSidebarAni; -webkit-animation-duration: .25s; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; } @-webkit-keyframes l ...

CSS - Layering new DIVs over existing DIVs

My goal is to implement "vertical-align: bottom;" in order for the DIVs to align from the bottom of the wrapper/parent DIV to the top. However, I am facing an issue where I want the first DIVs to be displayed at the bottom, rather than at the default top p ...

What is the best way to define relative paths for content like CSS files?

Whenever I link to a file, I always find myself having to include the entire absolute path like this <link rel="stylesheet" type="text/css" href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" /> I want to simplify it to ...

What is the method for a mono social icon to function without requiring a specific class for each icon

Curious about the magic behind Mono Social Icons and how it effortlessly displays the correct icon. Unlike other font icon sets that require adding a class name to load a utf-8 character in :after, Mono Social Icons keeps it simple. Just add the icon as t ...

Creating a seamless card-deck layout in Bootstrap4 - optimizing content display

I am attempting to utilize the card-deck feature with cards arranged in the following manner : The card-deck is centered in a column The card-deck adjusts to fit the content width (currently, it always spans 100% width, even when using width: auto) The ca ...

Preserve the scroll position while initiating a jQuery dialog

Utilizing Jquery UI Dialog to showcase a popup box In my design, there is a grid on the page where each row contains an icon that triggers a dialog box An issue arises when scrolling down and opening a dialog at the bottom of the grid, as it causes the p ...

Guide to customizing margins at specific breakpoints in Bootstrap 4 without using javascript

Despite exploring numerous solutions and trying them out, I have yet to achieve the desired results. I am looking to customize margins for various breakpoints in Bootstrap. For example: View for laptops, Tablet view The issue may be related to defined w ...

Create and adapt dynamic tiles to fit within the available width

I am looking to create a dynamic tile (div) that adjusts based on the number of users available, similar to how it works in Microsoft Teams meetings. For example, if there is only one user, the div should occupy the full screen. When there are two users ...

Create a choppy distortion effect using CSS filters in Google Chrome

Currently working on a hover effect that enhances image brightness and scales the image during hover. However, I am experiencing some choppiness in the transform animation due to the CSS filter. It's strange because it appears to be smooth in Safari a ...

Experience the feeling of releasing momentum by click and dragging the scroll

One feature I am looking for is the ability to control the scroll speed when dragging, and have the scroll continue moving slightly after release instead of stopping instantly. CodePen: https://codepen.io/rKaiser/pen/qGomdR I can adjust the speed adequat ...

Stacking divs one on top of the other

My goal is to design a simple webpage with two full screen background colored divs. On top of these background divs, I want to add two smaller divs where I can input text and place a button underneath to randomize the words (refer to the attached screensho ...

Tips for converting text from an HTML input field to a JSON file

After designing a form with four text fields and a submit button, my goal is to save the data into a JSON file upon submission. Additionally, I am looking for a way to display all of the JSON data on my webpage. ...

Challenges related to elements overlapping in design (CSS, HTML)

Some unusual layout issues are occurring that seem to be related to CSS. The main div, toolbar div, and the closed dojo expandopane are causing problems. Initially, the top of the main div overlaps the toolbar until the expando pane is expanded once. Afte ...

Obtain the rotational value in 3D CSS using JavaScript by extracting it from the matrix3d()

My element has been 3D transformed in the following way: .foo { transform: rotateX(-30deg) rotateY(35deg); } Now, I am looking to retrieve these values using JavaScript. Extracting the 3D matrix is simple: var matrix = $('.foo').css('tr ...

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

How can I hide text using CSS or Jquery?

<label><input type="radio">TextdoesntMakeSense</label> This content that is generated dynamically appears to be read-only, or so I believed... label { color:#fff; font-size:0.0001em; } It's interesting on a webpage with a ...