vue配置scss全局变量

背景

项目中需要统一颜色、字体、字号等简单样式，也想复用一些通用样式。

技术栈

项目中引了sass-loader，正好sass支持定义这些全局变量，可以随取随用。

问题

vue-cli如何支持呢？

解决办法

查了官网，特别方便，只需在vue.config.js中配置：

  css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/css/variable.scss";`
            }
        }
    },

服务重启，可以自由的 使用这些变量啦~