vue-cli3和vue-cli4中vue.config.js给sass变量赋值

var appConfig = require("./public/appConfig")
var styleVariables = appConfig.style;

//在module.exports = {}中插入webpack配置

configureWebpack: {
        module: {
            rules: [{
                test: /\.scss$/,
                use: [
                    {
                        loader: 'sass-loader',
                        options: {
                            additionalData: Object.keys(styleVariables)
                                .map(k => `\$${k}: ${styleVariables[k]};`)
                                .join('\n')
                        }
                    }
                ]
            }]
        }
    },

其中appconfig文件如下

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
            (global = global || self, global.appConfig = factory());
}(this, function () {
    'use strict';
    var appConfig = {

        style: {
            titleHeight: 56,//标题栏高度
            footerHeight: 70,//页脚高度
        },

    }
    return appConfig;
}))

在sass文件中使用titleHeight变量

    height: #{$titleHeight+"px"};

另一种方式

1. 设定sass可以直接读取的参数，参数名应当符合css定义：

    document.getElementsByTagName('body')[0].style.setProperty('参数名','值');

1. sass 中读取参数：

    $a :var(参数名)