在 Angular 2 组件中包含 SASS 变量答案

【问题标题】：Include SASS variables in an Angular 2 component在 Angular 2 组件中包含 SASS 变量
【发布时间】：2017-04-09 03:55:10
【问题描述】：

我想知道是否可以在 Angular 2 组件中使用 sass 变量。比如：

@Component({

  selector: 'my-component',

  template: `
    <div>
      <div class="test-div">test div 1</div>
    </div>
  `,

  styles: [
    `
    @import "variables";

    .test-div{
      border: 1px solid $test-color;
    }
  `]

})

我的文件_variables.scss：

$test-color: green !default;

似乎无论我尝试什么，sass 变量都无法识别。非常感谢任何帮助。

【问题讨论】：

标签： javascript angular sass

【解决方案1】：

我不同意这里的正确答案是为什么。

ATM 正确答案建议在需要变量的每个组件文件夹上创建一个 _variables.scss。这在任何规模的项目中都很难维护，除非您只有一个组件，在这种情况下您不需要导入；只需使用 component.scss

.angular-cli.json(Angular 6中的angular.json)中有一个选项，旨在解决这个确切的问题，这里是：

...
,
"stylePreprocessorOptions": {
  "includePaths": [
    "./scss/base"  // BASE SCSS LOCATION
  ]
},
...

当前文件的基本 scss 位置相对路径（.angular-cli.json）在那个位置你可以添加 _variables.scss _mixins.scss _anyother.scss

然后在任何 component.scss 中你可以：

@import 'variables';

感谢您的宝贵时间。

额外：通过你的例子，你似乎没有使用 angular/cli 来生成组件，如果是这种情况，请使用这个 ng g c component-name-here。

【讨论】：

好答案。您可能需要重新启动服务器，以便它可以编译 angular.json 文件中的更改。

【解决方案2】：

包括来自单独文件的样式。

@Component({
  selector: 'app-questions',
  templateUrl: './questions.component.html',
  styleUrls: ['./questions.component.scss'],
})

将_variables.scss文件添加到组件文件夹并导入questions.component.scss

@import 'variables';

.questions-filter{
  a {
    color: $green;
  }
}

它对我很有效。

【讨论】：

嘿，亚历克斯。感谢您花时间回答这个问题。这是一个对我来说似乎相当不错的解决方案，并且有效。
它可以工作，但在任何项目规模下都很难维护。请参阅下面的答案！