javascript - 在 Angular 2 组件中包含 SASS 变量

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
  ]
},
...

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

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

@import 'variables';

感谢您的宝贵时间。

额外:根据您的示例，您似乎没有使用 angular/cli 来生成组件，如果是这种情况，请在此处使用此 ng g c component-name-。