如何获取import sass里面的变量？

Question

------color.scss-------
$color:red;

<style lang="scss">
    @import './sass/color.scss';

    body{
        background:$color
    }
</style>

使用vue-cli构建的项目，怎么配置能获取到这个$color？

Answer 1

样式标签这样写

<style lang="sass" rel="stylesheet/scss">

还有你要有 node-sass, sass, sass-loader依赖（通过npm安装）

在webpack里加对应的loader

{
  test: /\.scss/,
  loader: 'style!css!sass'
},

最后建议不要用属性color做变量名，尽量选用有意义的命名

希望对你有帮助~