覆盖通过JavaScript文件加载的SCSS文件变量的可行方法是什么？

假设我有一个组件包含一个用于行为的Javascript文件,一个HTML模板文件和一个用于外观的SCSS文件.

我们使用Webpack在应用程序的主Javascript中加载组件的Javascript(例如,通过require('./path/to/the-component.js')).我们使用组件的Javascript加载其SCSS文件(通过require('./the-component.scss')).

组件的SCSS文件包含一个具有默认值的变量(例如,最小高度:) $min-height: 400px.

如果我不喜欢组件的所有用法中的400px:我如何覆盖这样的变量(例如在应用程序的SCSS文件*中)来调整$min-height到500px？当然,由于违反关注点分离原则并不是一个好主意,因此组件不应该对其周围目录的组织方式做出任何假设.

到目前为止,我没有找到解决这个问题的方法.但我确信有人做过.

*)以及如何(在哪里)我应该加载这样的文件(通常,我通过app.js加载app.scss)