错误：使用 Sass 的 Angular 组件中的未定义变量

Posted

技术标签:

【中文标题】错误：使用 Sass 的 Angular 组件中的未定义变量【英文标题】：Error: Undefined variables in Angular Components using Sass 【发布时间】：2018-07-28 07:48:51 【问题描述】：

我有这个错误，看起来我没有将变量导入组件。但这是我的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.

`

还有组件login.component.scss的sass `

.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;

`

也许我没有导入一些东西，我不知道缺少什么。我尝试将foundation.scss导入styles.scss，所以我只是将所有foundation.scss放入styles.scss并更改了路线，但它不起作用

【问题讨论】：

您的 $medium-gray 变量在哪里定义？这就是错误。您需要将定义它的文件导入到您的登录组件 sass 文件中 那些在styles.scss导入的_settings.scss中声明。 【参考方案1】：

在每个角度组件中，您需要包含您使用的任何变量

在您的示例中，您需要将 _settings.scss 导入到您的 login.component.scss 文件中

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

这里是关于这种行为的 github https://github.com/angular/angular-cli/issues/1253

您可以在配置（angular-cli 或 webpack）中指定 stylePreprocessorOptions，这样您就可以只导入“设置”而不是指定完整路径，但您仍然必须在任何位置导入该文件用过

【讨论】：

以上是关于错误：使用 Sass 的 Angular 组件中的未定义变量的主要内容，如果未能解决你的问题，请参考以下文章

将 sass/css 文件导入所有 Angular 组件

如何在 Angular 6 中导入 sass 文件

如何在 SASS 中使用 Angular 4

如何在 Angular 2 中将 SASS 用于组件样式？

如何在 Angular 组件中访问 SCSS/SASS 变量

angular-cli中的SCSS加载错误