title: Error: Undefined variables in Angular Components using Sass
body: <p>I have this error and looks like i'm not importing the variables to the components. but this is my <code>style.scss</code></p>
  
  <p>`</p>
  
  <pre><code>/* You can add global styles to this file, and also import other style files */
  /**
   * Foundation for Sites by ZURB
   * Version 6.4.4-rc1
   * foundation.zurb.com
   * Licensed under MIT Open Source
   */
  
  // Dependencies
  @import '../node_modules/foundation-sites/scss/foundation';
  @import '../node_modules/foundation-sites/_vendor/normalize-scss/sass/normalize';
  @import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
  @import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/helpers/true';
  @import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/contain';
  @import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/purge';
  @import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/remove';
  @import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/replace';
  @import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/to-list';
  
  // Settings
  // import your own `settings` here or
  // import and modify the default settings through
  @import '../node_modules/foundation-sites/scss/settings/settings';
  
  // Sass utilities
  @import '../node_modules/foundation-sites/scss/util/util';
  
  // Global variables and styles
  @import '../node_modules/foundation-sites/scss/global';
  
  // Components
  @import '../node_modules/foundation-sites/scss/grid/grid';
  @import '../node_modules/foundation-sites/scss/xy-grid/xy-grid';
  @import '../node_modules/foundation-sites/scss/typography/typography';
  @import '../node_modules/foundation-sites/scss/forms/forms';
  @import '../node_modules/foundation-sites/scss/components/visibility';
  @import '../node_modules/foundation-sites/scss/components/float';
  @import '../node_modules/foundation-sites/scss/components/button';
  @import '../node_modules/foundation-sites/scss/components/button-group';
  @import '../node_modules/foundation-sites/scss/components/accordion-menu';
  @import '../node_modules/foundation-sites/scss/components/accordion';
  @import '../node_modules/foundation-sites/scss/components/badge';
  @import '../node_modules/foundation-sites/scss/components/breadcrumbs';
  @import '../node_modules/foundation-sites/scss/components/callout';
  @import '../node_modules/foundation-sites/scss/components/card';
  @import '../node_modules/foundation-sites/scss/components/close-button';
  @import '../node_modules/foundation-sites/scss/components/drilldown';
  @import '../node_modules/foundation-sites/scss/components/dropdown-menu';
  @import '../node_modules/foundation-sites/scss/components/dropdown';
  @import '../node_modules/foundation-sites/scss/components/flex';
  @import '../node_modules/foundation-sites/scss/components/responsive-embed';
  @import '../node_modules/foundation-sites/scss/components/label';
  @import '../node_modules/foundation-sites/scss/components/media-object';
  @import '../node_modules/foundation-sites/scss/components/menu';
  @import '../node_modules/foundation-sites/scss/components/menu-icon';
  @import '../node_modules/foundation-sites/scss/components/off-canvas';
  @import '../node_modules/foundation-sites/scss/components/orbit';
  @import '../node_modules/foundation-sites/scss/components/pagination';
  @import '../node_modules/foundation-sites/scss/components/progress-bar';
  @import '../node_modules/foundation-sites/scss/components/reveal';
  @import '../node_modules/foundation-sites/scss/components/slider';
  @import '../node_modules/foundation-sites/scss/components/sticky';
  @import '../node_modules/foundation-sites/scss/components/switch';
  @import '../node_modules/foundation-sites/scss/components/table';
  @import '../node_modules/foundation-sites/scss/components/tabs';
  @import '../node_modules/foundation-sites/scss/components/title-bar';
  @import '../node_modules/foundation-sites/scss/components/top-bar';
  @import '../node_modules/foundation-sites/scss/components/thumbnail';
  @import '../node_modules/foundation-sites/scss/components/tooltip';
  @import '../node_modules/foundation-sites/scss/prototype/prototype';
  
  @mixin foundation-everything(
    $flex: true,
    $prototype: false
  ) {
    @if $flex {
      $global-flexbox: true !global;
    }
  
    @include foundation-global-styles;
    @if not $flex {
      @include foundation-grid;
    }
    @else {
      @if $xy-grid {
        @include foundation-xy-grid-classes;
      }
      @else {
        @include foundation-flex-grid;
      }
    }
    @include foundation-typography;
    @include foundation-forms;
    @include foundation-button;
    @include foundation-accordion;
    @include foundation-accordion-menu;
    @include foundation-badge;
    @include foundation-breadcrumbs;
    @include foundation-button-group;
    @include foundation-callout;
    @include foundation-card;
    @include foundation-close-button;
    @include foundation-menu;
    @include foundation-menu-icon;
    @include foundation-drilldown-menu;
    @include foundation-dropdown;
    @include foundation-dropdown-menu;
    @include foundation-responsive-embed;
    @include foundation-label;
    @include foundation-media-object;
    @include foundation-off-canvas;
    @include foundation-orbit;
    @include foundation-pagination;
    @include foundation-progress-bar;
    @include foundation-slider;
    @include foundation-sticky;
    @include foundation-reveal;
    @include foundation-switch;
    @include foundation-table;
    @include foundation-tabs;
    @include foundation-thumbnail;
    @include foundation-title-bar;
    @include foundation-tooltip;
    @include foundation-top-bar;
    @include foundation-visibility-classes;
    @include foundation-float-classes;
  
    @if $flex {
      @include foundation-flex-classes;
    }
  
    @if $prototype {
      @include foundation-prototype-classes;
    }
  }
  
  @include foundation-everything(true);
  </code></pre>
  
  <p>`</p>
  
  <p>`</p>
  
  <pre><code>ERROR in ./src/app/login/login.component.scss
  Module build failed:
    border: 1px solid $medium-gray;
                     ^
        Undefined variable: "$medium-gray".
        in C:\Users\Fireball\Desktop\jesus\Proyectos\Talkiefy2\src\app\login\login.component.scss (line 2, column 21)
  Error:
    border: 1px solid $medium-gray;
                     ^
        Undefined variable: "$medium-gray".
        in C:\Users\Fireball\Desktop\jesus\Proyectos\Talkiefy2\src\app\login\login.component.scss (line 2, column 21)
      at options.error (C:\Users\Fireball\Desktop\jesus\Proyectos\Talkiefy2\node_modules\node-sass\lib\index.js:291:26)
   @ ./src/app/login/login.component.ts 22:21-54
   @ ./src/app/app.module.ts
   @ ./src/main.ts
   @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
  ERROR in ./src/app/landing/landing.component.scss
  Module build failed:
    max-width: $global-width;
              ^
        Undefined variable: "$global-width".
        in C:\Users\Fireball\Desktop\jesus\Proyectos\Talkiefy2\src\app\landing\landing.component.scss (line 19, column 14)
  Error:
    max-width: $global-width;
              ^
        Undefined variable: "$global-width".
        in C:\Users\Fireball\Desktop\jesus\Proyectos\Talkiefy2\src\app\landing\landing.component.scss (line 19, column 14)
      at options.error (C:\Users\Fireball\Desktop\jesus\Proyectos\Talkiefy2\node_modules\node-sass\lib\index.js:291:26)
   @ ./src/app/landing/landing.component.ts 22:21-56
   @ ./src/app/app.module.ts
   @ ./src/main.ts
   @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
  
  webpack: Failed to compile.
  </code></pre>
  
  <p>`</p>
  
  <p>And the sass of the components <code>login.component.scss</code>
  `</p>
  
  <pre><code>.log-in-form {
    border: 1px solid $medium-gray;
    padding: $form-spacing;
    border-radius: $global-radius;
  }
  </code></pre>
  
  <p><code>
  </code>landing.component.scss`</p>
  
  <p>`</p>
  
  <pre><code>// Imports
  
  // hero
  $marketing-site-hero-height: 65vh;
  
  .marketing-site-hero {
    background: url('https://wallpaperscraft.com/image/usa_new_york_top_view_skyscrapers_112139_2560x1440.jpg') top right no-repeat;
    height: $marketing-site-hero-height;
    background-size: cover;
    display: flex;
    align-items: center;
  
    @media screen and (min-width: 40em) {
      background-position: center center;
    }
  }
  
  .marketing-site-hero-content {
    max-width: $global-width;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
  
    h1 {
      font-size: 32px;
      color: white;
    }
  
    p {
      color: white;
    }
  
    .button.round {
      border-radius: 5000px;
      text-transform: uppercase;
      font-size: 12px;
      margin-bottom: 0;
    }
  
    @media screen and (min-width: 40em) {
      padding-left: 50%;
    }
  }
  
  // features
  .marketing-site-content-section {
    display: flex;
    flex-wrap: wrap;
  
    .button.round {
      border-radius: 5000px;
      text-transform: uppercase;
      margin-bottom: 0;
    }
  
    .marketing-site-content-section-img {
      align-self: center;
      flex: 1 0 100%;
  
      img {
        width: 100%;
      }
  
      @media screen and (min-width: 40em) {
        flex: 1 0 50%;
      }
    }
  
    .marketing-site-content-section-block {
      padding: 1rem;
      flex: 1 0 100%;
      align-self: stretch;
      background: $light-gray;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
  
      @media screen and (min-width: 40em) {
        flex: 1 0 50%;
        padding: 2rem;
      }
    }
  }
  
  .marketing-site-content-section-block-header {
    font-size: 24px;
  }
  
  .marketing-site-content-section-block-subheader {
    font-size: 13px;
  }
  
  // the best
  .marketing-site-features {
    text-align: center;
    padding: 2rem 0;
  
    .fa {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: $primary-color;
    }
  
    .marketing-site-features-title {
      font-size: 1.125rem;
      margin-bottom: 1rem;
    }
  
    @media screen and (min-width: 40em) {
      text-align: left;
    }
  }
  
  .marketing-site-features-headline {
    text-align: center;
    font-size: 24px;
  }
  
  .marketing-site-features-subheadline {
    margin-bottom: 2rem;
    text-align: center;
  }
  
  // footer
  #engadget-footer-sitemap-container {
   max-width: 100%;
   width: 100%;
   margin: 0 auto;
   margin-top: rem-calc(0);
   background-color: $black;
  
     #engadget-footer-sitemap {
       @include grid-row();
       color:$light-gray;
       padding: rem-calc(60) 0;
       a {
         color:$light-gray !important;
         }
     .links {
       @include breakpoint(small) {
         @include grid-layout(2, '.link-column', $grid-column-gutter);
         }
       @include breakpoint(large) {
         @include grid-layout(4, '.link-column', $grid-column-gutter);
         }
  
       .link-column:not(:last-child) {
       border-right:1px solid $light-gray
       }
     }
   }
  }
  #engadget-footer-social-container {
   max-width: 100%;
   width: 100%;
   margin: 0 auto;
   margin-top: rem-calc(0);
   background-color: $dark-gray;
  
   #engadget-footer-social {
     @include grid-row();
     color:$light-gray;
     padding: rem-calc(60) 0;
     a {
       color:$light-gray !important;
       }
     .footer-left {
       @include breakpoint(small) {
         @include grid-column(12);
       }
       @include breakpoint(medium) {
         @include grid-column(6);
       }
       @include breakpoint(large) {
         @include grid-column(5);
       }
       .input-group-field {
         background: $white
       }
     }
  
     .footer-right {
       text-align: right;
       @include breakpoint(small) {
         @include grid-column(12);
       }
       @include breakpoint(medium) {
         @include grid-column(6);
       }
     }
     .fa {
       padding: 0 0 0 0.6rem;
       }
     h2 {
       color: $white;
       }
     p {
       font-size: 0.8rem;
       margin-bottom: 0;
     }
   }
  }
  
  #engadget-footer-contact-details-container {
   max-width: 100%;
   width: 100%;
   margin: 0 auto;
   margin-top: rem-calc(0);
   background-color: $white;
  
   #engadget-footer-contact-details {
     @include grid-row();
     color:$dark-gray;
     padding: rem-calc(20) 0;
     a {
       color:$dark-gray !important;
       }
  
     .footer-left {
     @include breakpoint(small) {
     @include grid-column(12);
     li {
       display: block;
       }
     text-align: center;
     }
     @include breakpoint(medium) {
     @include grid-column(6);
     text-align: left;
     }
      @include breakpoint(large) {
      @include grid-column(8);
      ul {
        margin-bottom: 0;
        }
     li {
       display: inline-block
       }
     }
     font-size: 0.9rem;
     .fa {
       padding: 0 0.4rem;
       }
   }
   .footer-right {
     @include breakpoint(small) {
     @include hide-for-only(small);
     }
     @include breakpoint(medium) {
     @include grid-column(6);
     }
      @include breakpoint(large) {
      @include grid-column(4);
      text-align: right;
      ul {padding-top: 1.6rem;}
  
  
     }
     font-size: 0.9rem;
     .fa {padding: 0 0.4rem;}
     }
   }
  }
  </code></pre>
  
  <p>`</p>
  
  <p>Maybe i'm not importing something and i don't know what is missing. i tried importing the foundation.scss into the styles.scss, so i just put the all foundation.scss into the styles.scss and changed the routes but its not working</p>