我想知道我是否可以在 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 变量都无法识别。 非常感谢任何帮助。
最佳答案
我不同意这里的正确答案是为什么。
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-。
关于javascript - 在 Angular 2 组件中包含 SASS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40793275/