Kevin Powell - Community•15mo ago

@use not working

I am trying to use @use to import my reset nd nav code but its not working

18 Replies

vince•15mo ago

Are you compiling to main.css and pointing your link href to main.css?

Unknown User•15mo ago

Message Not Public

Coder_Carl•15mo ago

Import is old syntax and @use is preferred due to possible name space collisions when importing from different files @Rs this is one of those situations where people can guess but unless we can see a codepen or code repo we can't tell you what the issue is. It could be your build process, it could be a file not linking properly, it could be how you are running the local server etc etc etc

rishit•15mo ago

yep k ill make a repo

rishit•15mo ago

https://github.com/rishitRocks2069/Sole-Savings

GitHub

GitHub - rishitRocks2069/Sole-Savings

Contribute to rishitRocks2069/Sole-Savings development by creating an account on GitHub.

rishit•15mo ago

anyone here? welp pls help

Coder_Carl•15mo ago

Will have a look after breakfast. Just woke up

vince•15mo ago

@rishit https://github.com/rishitRocks2069/Sole-Savings/pull/1

GitHub

Fixed sass compilation issue and restructured folders for scalabili...

… & maintainability

Daryl•15mo ago

I think it's not preferable to use the star in this case.

@use "../tokens/colors" as *;

@use "../tokens/colors" as *;

Sure it might be seamless in a small project, but it's important to note that it might lead to compilation issues if there is a conflict between variable names.

vince•15mo ago

I agree! I usually assign a name to the namespace.

@use "../tokens/colors" as colors;

body {
  colors.$black;
}

@use "../tokens/colors" as colors;

body {
  colors.$black;
}

I made another commit for it 🙂 (I should really learn how to squash commits 😂)

Coder_Carl•14mo ago

@rishit if you were to compile the scss to css you would see inside of the css file

/* Error: Undefined variable.
 *    ,
 * 22 |     background-color: $pink;
 *    |                       ^^^^^
 *    '
 *   _base.scss 22:23  @use
 *   main.scss 1:1     root stylesheet */

body::before {
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
      "Droid Sans Mono", monospace, monospace;
  white-space: pre;
  display: block;
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 2px solid black;
  content: "Error: Undefined variable.\a    \2577 \a 22 \2502      background-color: $pink;\d\a    \2502                        ^^^^^\a    \2575 \a   _base.scss 22:23  @use\a   main.scss 1:1     root stylesheet";
}

/* Error: Undefined variable.
 *    ,
 * 22 |     background-color: $pink;
 *    |                       ^^^^^
 *    '
 *   _base.scss 22:23  @use
 *   main.scss 1:1     root stylesheet */

body::before {
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
      "Droid Sans Mono", monospace, monospace;
  white-space: pre;
  display: block;
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 2px solid black;
  content: "Error: Undefined variable.\a    \2577 \a 22 \2502      background-color: $pink;\d\a    \2502                        ^^^^^\a    \2575 \a   _base.scss 22:23  @use\a   main.scss 1:1     root stylesheet";
}

as has been pointed out by @vince the namespacing of the scss variables is the problem. if you fix this, you can continue on with your code. there are a couple of different ways around this but at the end of the day you will end up importing something at the top of the scss file i.e.

 @use 'colors' as *;

 @use 'colors' as *;

or you could create a barrel that handles several similar files together and bundles them together like colors, sizes, functions, mixins etc. that would be used in pretty much every other scss file. there are plenty of articles about this and Kevin has put out a video or two on doing SASS this way. i.e. https://www.youtube.com/watch?v=CR-a8upNjJ0 The main thing that I would suggest is that you continue playing with code and find out what works for you @vince while youve done a lot of work on that branch you have significantly changed their entire workflow and I dont think it is reasonable to expect someone to suddenly go from all files in 1 dir to having 7 -10 barrels with layout, base, abstracts etc.

Kevin Powell

YouTube

Stop using @import with Sass | @use and @forward explained

Keep up to date with my Sass course: https://beyondcss.dev/?utm_campaign=OlderYouTubeVideos&utm_source=YouTube The use of @import has been deprecated in Sass for quite a while now, but a lot of people still use it. In this video, I take a quick look at the replacements you should be using instead, @use and @forward. I just scratch the surface...

vince•14mo ago

fair enough! I appreciate your insight. I made a PR for what I personally do, they're free to accept it and use it or not 🙂

Coder_Carl•14mo ago

yer I tend to go the whole hog and I appreciate the effort that must have taken

rishit•14mo ago

tysm everyone @vince y are there 2 styles folders

vince•14mo ago

Were there? I don't see it in your repo

rishit•14mo ago

oh no mistake on my part

vince•14mo ago

No problem! 🙂

rishit•14mo ago

👍

Gaming

Programming

@use not working