Vue SCSS lighten()答案

【问题标题】：Vue SCSS lighten()Vue SCSS lighten()
【发布时间】：2019-03-26 20:05:30
【问题描述】：

如何在 VueJS 中使用像 lighten( ); 这样的 SASS 颜色函数？具体代码如下：

<style lang="scss">
@import "../assets/variables";

.disable-primary {
  lighten( $primary, 10% );
}
</style>

但我在 VS Code 中遇到编译错误：

Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue- 
loader/lib/style-compiler?{"vue":true,"id":"data-v- 
8dc7cce2","scoped":false,"hasInlineConfig":false}!./node_modules/sass- 
loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue- 
loader/lib/selector.js?type=styles&index=1!./src/components/Home.vue
Module build failed: 
lighten( $color-primary, 10% );
^
  Property "lighten" must be followed by a ':'

【问题讨论】：

标签： vue.js sass visual-studio-code vuejs2 node-sass

【解决方案1】：

lighten 函数只返回一个颜色，你仍然需要将它分配给一个接受颜色字符串的 CSS 属性，例如：

.disable-primary {
    background-color: lighten( $primary, 10% );
}

或者你想设置的任何属性。

【讨论】：