vue-cli4 配置全局scss/sass变量

tips:项目使用scss之前吗，首先看看是否sass相应的包

1、_variables.scss文件

/* Variables */// Base color$black:#2c2f38;$green:#1ddfbc;$blue:#2ec4d5;$fontColor:#e7ecf0;

2、执行vue add style-resources-loader

vue add style-resources-loader

3、配置vue.config.js

const path = require("path");module.exports = {...pluginOptions: {'style-resources-loader': {preProcessor: 'scss',patterns: [//加上自己的文件路径，不能使用别名path.resolve(__dirname, 'src/styles/_variables.scss'),]}}...}

4、使用

<style lang="scss">#app {background-color: $black;}</style>