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(参数名)