Question

我想知道我是否可以在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变量都无法识别。任何帮助非常感谢。

Answer 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组件名称 - 此处。

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

对我来说效果很好。

在Angular 2组件中包含SASS变量

2 个答案: