Error: Undefined variables in Angular Components using Sass

Question

I have this error and looks like i'm not importing the variables to the components. but this is my style.scss

`

/* 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);

`

`

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.

`

And the sass of the components login.component.scss `

.log-in-form {
  border: 1px solid $medium-gray;
  padding: $form-spacing;
  border-radius: $global-radius;
}

landing.component.scss`

`

// 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;}
   }
 }
}

`

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

Answer 1

In each angular component you need to include any variables that you use

In your example, you need to import _settings.scss to your login.component.scss file

@import "./path/to/_settings.scss"

Here is the github about this behaviour https://github.com/angular/angular-cli/issues/1253

You can specify stylePreprocessorOptions in your config (angular-cli or webpack) so that you can just import "settings" instead of specifying the full path, but you still have to import that file wherever it's used