Error undefined variable sass

Undefined variable error but variable is indeed defined #2070

I am using Gulp.

The text was updated successfully, but these errors were encountered:

Found the reason, I import in a wrong way.

@guoyunhe can you elaborate?

@manix I faced the same issue with Sass, in my case the error was because I included the variables file after the other file where I used them, you could try doing this, reorder files import, make the variables file at the top.

@majidzeno wow, thank you so much. I also stuck at that error

how to import file

@ahsin59 Check out the Sass tutorial for information on how to use @import .

@manix thanks a lot .it worked

@manix I faced the same issue with Sass, in my case the error was because I included the variables file after the other file where I used them, you could try doing this, reorder files import, make the variables file at the top.

thanks @manix it works for me

I my case, it was weird: there was no @import of the mixins file but somehow it highlighted a random variable inside a mixin inside that file as being undefined (while in reality being defined in the same file). @import ing the mixins file fixed the issue.

I made the mistake of declaring variables inside :root. As in;
:root <
$primary-color: #fff;
>
So when I referenced this variable, it gave me that error. FIxing it is as easy as removing :root and the curly braces.

OMG i searched for at least 45min and it ends up that it is just an order of imports :(((( i didn’t even know imports had orders i’m so mad

@majidzeno that worked great thank you

@manix I faced the same issue with Sass, in my case the error was because I included the variables file after the other file where I used them, you could try doing this, reorder files import, make the variables file at the top.

You can also name all your files with an underscore upfront (e.g. _color.scss , _font.scss , _button.scss , etc.) and import them in one single style.scss :

This technique is called partials and will merge all your styles in one single CSS output so ordering gets sorted out by SCSS. Note that the filenames start with an underscore but the imports don’t.

@manix I faced the same issue with Sass, in my case the error was because I included the variables file after the other file where I used them, you could try doing this, reorder files import, make the variables file at the top.

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Undefined Variable Error with @Use #3094

Issue:

A partial .scss file incorporating variables from a .sass file using the @use keyword leads to the error: SassError: Undefined Variable . When the @use is replaced with @import the variables are recognized.

UPDATE: Issue localized to variable naming nomenclature. Variables named $— do not propagate. Traditionally named variables $Foo function as expected. This appears to be a bug, or undocumented behavior with the SASS Language.

Setup:

The first line of the main stylesheet: @use «libs/shared/angular/util/theme/src/lib/style/index»

The index file looks like this:

The file _css-variables.sass looks like this:

The default theme file looks like this:

I setup a debug helper to ensure I was importing the files in the right order, which as shown below it appears as if they are:

Expected Behavior

Variables named $—Foo should behave no differently than other variables. Or it should be documented that this is a semantic limitation.

Actual Behavior

The variables in the css-variable are not recognized in the theme file while using the @use keyword.

UPDATE: After further debugging, the syntax $—Foo appears to be causing the variable export issue. When these variables are refactored to $Foo , the compilation performs as expected.

Maybe this is user error, which I would love community feedback if I’ve somehow set this up improperly.

The text was updated successfully, but these errors were encountered:

@RoboZoom the definition and behavior of «private members» (prefixed with _ or — ) is documented here. Closing, since it’s the expected/documented behavior, and we try to reserve this board for bugs & features.

I’m not clear what problem these variables are meant to solve, since the variable name and string name are identical. From what you’ve provided here, my instinct is just to remove the — prefixed variables entirely, and use the strings when setting up your default-theme. Alternately, you could change the names to be $css-* instead of $—* , or something like that.

Источник

Undefined variable errors only in watch mode. #2560

test1.scss:
$w: white
test2.scss
.c Run in win10 cmd:
node-sass main.scss main.css
No error, generated content:
.p But if I run the watcher:
node-sass —watch main.scss main.css
Then make changes to test2.scss and save, error:

• NPM version ( npm -v ): 6.4.1
• Node version ( node -v ): v8.12.0
• Node Process ( node -p process.versions ):
  < http_parser: ‘2.8.0’,
  node: ‘8.12.0’,
  v8: ‘6.2.414.66’,
  uv: ‘1.19.2’,
  zlib: ‘1.2.11’,
  ares: ‘1.10.1-DEV’,
  modules: ’57’,
  nghttp2: ‘1.32.0’,
  napi: ‘3’,
  openssl: ‘1.0.2p’,
  icu: ‘60.1’,
  unicode: ‘10.0’,
  cldr: ‘32.0’,
  tz: ‘2017c’ >
• Node Platform ( node -p process.platform ): win32
• Node architecture ( node -p process.arch ):x64
• node-sass version ( node -p «require(‘node-sass’).info» ): Cannot find module ‘node-sass’
• npm node-sass versions ( npm ls node-sass ): C:UsersxxxDesktop`— (empty)
• node-sass version( ndoe-sass -v ):
  node-sass 4.10.0 (Wrapper) [JavaScript]
  libsass 3.5.4 (Sass Compiler) [C/C++]

I know if I add @import «test1» to «test2.scss» it would not complain, but I wonder why this error only happens in watch mode?

The text was updated successfully, but these errors were encountered:

Источник

Webpack build fails with «SassError: Undefined variable» when updating 5.1.3 -> 5.2.0 #36785

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When updating 5.1.3 -> 5.2.0 our webpack build fails with the following error:

That line just imports the utilities @import «

Reduced test cases

Don’t know how to provide a test case for this as we don`t even use that variable.

What operating system(s) are you seeing the problem on?

What browser(s) are you seeing the problem on?

What version of Bootstrap are you using?

The text was updated successfully, but these errors were encountered:

Thanks for reporting this issue @gndk. There is a new _map.scss in v5.2.0. Don’t have the details regarding your Webpack build but you probably just need to @import «

bootstrap/scss/maps»; (that’s where $utilities-border-colors is defined) before @import «

Thanks for the quick reply @julien-deramond ! That did the trick 👍 . I only looked at the patch notes in the GitHub release, so I completely missed that. Will remember to check the migration page more in the future 🙂

Hello, I have this problem, how can I solve it? @gndk @julien-deramond

@turkic-dev: It is important to load the modules in the exact same order as in node_modules/bootstrap/scss/bootstrap.scss
Also, the following modules must be loaded

is bad practice. Unless you show as I always do, you will generate errors. Here is what I always use:

I know there are little shortcuts available — but why?

@turkic-dev: It is important to load the modules in the exact same order as in node_modules/bootstrap/scss/bootstrap.scss Also, the following modules must be loaded

The problem was that I did not import ‘scss/maps’, ‘scss/helpers’ and ‘scss/utilities/api’ files

Event fails after adding the map.scss in react project
#36851 (comment)

That’s the same with parceljs, same solution #36785 (comment)

I know I can just add the import @import «

bootstrap/scss/maps»; in node_modules/bootstrap/scss/_utilities.scss and then it works but this is annoying as I need to repeat it everytime I do a fresh install with npm i. Will this be fixed?

@BearCooder You should not change anything in node_modules, ever. Add @import «

bootstrap/scss/maps»; to your own css instead.

So I understanded it wrong in this thread. But still adding the import @import «

bootstrap/scss/maps»; in node_modules/bootstrap/scss/_utilities.scss resolved the issue that was mentioned at the beginning.
Anyway I got rid of bootstrap, I removed it in my project as it caused to much problems

Check the Doc at: https://getbootstrap.com/docs/5.2/customize/sass/#importing
Download: https://getbootstrap.com/docs/5.2/getting-started/download/#source-files
From the file: bootstrap-5.2.2/scss/bootstrap.scss
Copy from // scss-docs-start import-stack
Copy to // scss-docs-end import-stack
to your new scss main file and set all the @import «»; to correct path.
Ex:
@import «functions»; -> @import «../../../../../themes/contrib/bootstrap5/dist/bootstrap/5.2.2/scss/functions»;

Note:- Comment all unnecessary functionality that you are not using. So that your compiled file will be as small as possible.

I know I can just add the import @import «

Источник

[MUSIC]
0:00

Nobody’s workflow is perfect, and we don’t
always write perfect code from the start.
0:04

So, getting used to working with Sass will
take a little time.
0:09

And as you’ll soon see, you’re still gonna
experience a few bumps along the way.
0:12

So we’re gonna take a look at some of the
common issues I’ve come across
0:16

when using Sass features like variables,
mixins, extends, and more.
0:19

Hopefully, it’ll help alleviate some of
those bumps I mentioned.
0:23

We’ll also go over some best practices for
writing Sass and
0:27

how to inspect and debug Sass code in the
browser.
0:30

Then we’ll get our shiny new Sass website
all ready for production.
0:32

Let’s get to it.
0:35

>> What’s helpful about Sass is that if we
make a mistake,
0:37

Sass will tell us what we’re doing wrong
and where the problem exists in our code.
0:40

So in our latest workspace, let’s first
run a Sass watch by going
0:45

down to the console and typing sass
—watch scss:css.
0:50

So now if we preview and
0:57

refresh our website, we see that we’re
getting an error.
1:00

And the error tells us that there’s an
undefined variable in our project, and
1:03

it’s happening in our containers.scss
partial.
1:08

And if we take a look at our workspace
console,
1:13

we can see how it’s throwing the same
error in the command line output.
1:15

So it looks like it’s just a typo in our
variable name.
1:20

So now to fix this, we can go straight to
our containers partial and
1:24

scroll down to line 15.
1:29

And sure enough, there’s the border-light
variable, which actually needs to be
1:31

color-border-light, so let’s go ahead and
change that real quick.
1:36

So now when we save our partial, it looks
like it was fixed, but
1:42

now we’re getting another error saying
there’s
1:46

an undefined mixin on line three of our
typography partial.
1:49

So let’s go back to that.
1:54

Let’s open up the components directory and
open up the typography partial.
1:56

And yep, it looks like we need to fix our
mixin name.
2:02

So instead of fontface, one word, we need
to define it as font-face.
2:05

All right.
So let’s go ahead and save and compile.
2:10

And once we refresh, it looks like
everything is back to normal.
2:13

Great.
2:17

So anytime we see an undefined variable or
mixin error in our Sass, chances are that
2:19

we typed it incorrectly or accidentally
omitted it from our style sheet.
2:25

So next, let’s take a look at issues that
can happen when interpolating variables.
2:29

So, as we learned earlier, we sometimes
need to
2:36

use interpolation syntax to pass variables
and selectors and property names.
2:38

This way, we’re able to generate selectors
and
2:43

property names dynamically, which is
useful when writing mixins.
2:45

So let’s take a look at possible issues we
may encounter
2:48

if we forget to interpolate our variables.
2:52

So, over in the layout directory, let’s
open up our header partial,
2:53

and say we forget to interpolate the image
path variable in our background values.
2:59

So I’ll go ahead and delete the hash and
curly braces.
3:04

Then save.
3:10

Well, as we can see, this won’t actually
return an error,
3:12

so we might think everything’s okay
3:16

until we realize that our main header’s
background image is missing.
3:18

Well, since we didn’t interpolate the
variable, it literally returns the text
3:22

path imagein the image path, as we can see
here in the CSS output.
3:28

So that’s why in this case, since the
variables value is a string,
3:34

we’ll need to escape our variable using
interpolation syntax.
3:38

And the same thing would also happen with
our font paths, so
3:42

let’s keep that in mind.
3:45

So I’ll just go ahead and undo that,
refresh, and once again,
3:46

we have our main header background image
in our design.
3:51

But say we also forget to interpolate
3:54

the brk-narrow variable here in our media
query.
3:56

So let’s remove the hash and curly braces
around our variable.
4:00

And when we compile our Sass and
4:05

refresh our design, well, this time we get
an invalid CSS error.
4:08

Well that’s because Sass is expecting a
valid media query
4:13

after the @media directive.
4:17

In this case, if our variable comes right
after the @media directive,
4:19

which it does, we’ll need to interpolate
it.
4:24

So once again, let’s undo it to add the
interpolation syntax back in.
4:26

We’ll save.
4:30

And now everything’s back to normal.
4:32

So next, one of the biggest issues we may
encounter while working with
4:34

the Sass placeholders and the extend
directive is the lack of support for
4:38

extending from within a media query.
4:43

Unfortunately, Sass doesn’t allow
extending placeholders
4:45

across media queries.
4:49

So for example, say we wanted to extend
the t-border
4:50

placeholder inside our main header media
query here.
4:55

So let’s type @extend and
4:58

then we’re going to extend the t-border
placeholder.
5:04

So now when we save and compile our Sass
and refresh the page, we get the error,
5:08

You may not @extend an outer selector from
within @media.
5:14

And then it says that you may only extend
selectors within the same directive.
5:20

Well, the reason Sass doesn’t let us do
this is because basically,
5:25

we’re trying to extend a rule that’s from
another scope.
5:29

In our case, the t-border placeholder is
scoped to the root of the CSS.
5:33

Now, there are some workarounds for
5:38

this, but they’re still considered hacks
at this point.
5:39

But the good news is that cross-scope
extends
5:43

is one of the most wanted features from
the Sass community, so
5:46

hopefully it’s a feature that will soon be
available to us.
5:49

Finally, as I mentioned in the previous
stage, the order of our partial
5:53

import is important because it has
cascading effects on the output.
5:57

So, for instance, if we open up the base
directory and
6:01

the index partial inside of that.
6:04

Now, if we were to import the variables
partials last.
6:06

So, for instance, I will cut it and paste
it as the last import.
6:10

Once we save and compile our Sass and
refresh our design,
6:15

we’re going to get a bunch of undefined
variable errors since some of our base
6:19

styles are referencing variables and they
can’t find them.
6:23

Now, the same would happen if we were to
import
6:27

the mixins partial after any rules that
depend on a mixin.
6:31

[BLANK_AUDIO]
6:35

So, any variables, mixins or base styles
should be imported first, never last.
6:38

Typically, when writing a Sass rule,
6:45

it’s good practice to [SOUND] extend
placeholders first,
6:47

[SOUND] then include mixins, [SOUND] then
add the rest of the declarations.
6:50

This may help avoid specificity or cascade
issues in our CSS output.
6:55

So next, we’ll cover how to debug our Sass
code in the browser with source maps.
7:00