在vue-cli3使用sass(scss)定义的全局样式及变量

为统一风格及便于后续维护，在项目中常用的主色调、圆角、阴影相关的样式定义到一个全局变量文件中，常规的使用需要每个Vue组件中进行import,该操作会比较繁琐，经过了解后发现可以基于webpack的loader参数引入全局变量的方式来实现，相关实现过程如下所示：

vue.config.js

module.exports = {
  // ...
  css: {
    // 为便于在Vue组件中使用，全局引入variables.scss中定义的变量
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  }

variables.css

// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$theme: #004ca1;
// ...

vue 组件

<style lang="scss" scoped>
.btn-cursor {
  cursor:pointer;
  color: $theme
}
</style>