Mixin partial and variables partial not detected when scss is compiled. Error: Undefined Mixin and Partial

Question

My _variables.scss and _mixins.scss partials do not seem to be picked up when I compile my Sass files. My _globals.scss and _header.scss are picked up fine, even though they are in the same directory and accessed the same way.

In my style.scss file:

@use "globals";
@use "header";

Terminal error messages:

Error: Undefined mixin.
@include breakpoint-down(medium){display: none;}

Error: Undefined variable.
color: $grayishBlue;

I used a package.json code to compile my sass, with a few tweaks. Here is what mine looks like:

{
    "name": "project",
    "version": "0.1.0",
    "description": "SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML",
    "main": "public/index.html",
    "author": "5t3ph",
    "scripts": {
      "build:sass": "sass  --no-source-map src/sass:public/css",
      "copy:images": "copyfiles -u 1 ./src/images/**/* public",
      "copy:html": "copyfiles -u 1 ./src/*.html public",
      "copy": "npm-run-all --parallel copy:*",
      "watch:images": "onchange 'src/images/**/*' -- npm run copy:html",
      "watch:html": "onchange 'src/*.html' -- npm run copy:html",
      "watch:sass": "sass  --no-source-map --watch src/sass:public/css",
      "watch": "npm-run-all --parallel watch:*",
      "serve": "browser-sync start --server public --files public",
      "start": "npm-run-all copy --parallel watch serve",
      "build": "npm-run-all copy:html build:*",
      "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
    },
    "dependencies": {
      "autoprefixer": "^10.4.2",
      "browser-sync": "^2.27.7",
      "copyfiles": "^2.4.1",
      "cssnano": "^5.0.17",
      "npm-run-all": "^4.1.5",
      "onchange": "^7.1.0",
      "postcss-cli": "^9.1.0",
      "sass": "^1.49.8"
    }
  }

_globals.scss file:

@use "variables";
@use "mixins";

html {
    font-size: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Public Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    color: $grayishBlue; //if i comment out this line, i get an error //for mixins.
    line-height: 1.3;
}
// and so on... until we get to the styles that use the mixin.

//Visibility
.hide-for-mobile {
    // hide for mobile and tablet
    @include breakpoint-down(medium){
        display: none;
    }
}

.hide-for-desktop {
    //hide for desktop viewport widths
    @include breakpoint-up(large){
        display: none;
    }
}

_header.scss file:

@use "variables";

.header {

    nav {
        padding: 24px;
    }

//and so on... variables are used twice in this module.

File hierarchy in the sass folder is as follows:

 - sass
   - _globals.scss
   - _header.scss
   - _mixins.scss
   - _variables.scss
   - style.css
   - style.css.map
   - style.scss

Answer 1

As stated in the doc:

Members (variables, functions, and mixins) loaded with @use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own @use rules if they also want to access them.

Which means that in order to read your variables and mixins, you need to import them directly in the files that use them and not on your global styles file.

On _globals.scss and _header.scss add:

@use "variables" as *;
@use "mixins" as *;

Additionally, if you don't want to import both files every time, you can create a new file that will forward them and then import only this file:

// _settings.scss (or any other name)
@forward "variables";
@forward "mixins";

// _globals.scss & _header.scss
@use "settings" as *;