What are feasible ways of overwriting variables of SCSS files which are loaded through JavaScript files?

Question

Say I have a component consisting of one JavaScript file for behavior, one HTML template file, and one SCSS file for appearance.

We use Webpack to load the component's JavaScript in the app's main JavaScript (e.g. through require('./path/to/the-component.js')). And we use the component's JavaScript to load its SCSS file (through require('./the-component.scss')).

The component's SCSS file contains a variable which has a default value (e.g. a minimum height: $min-height: 400px).

If I do not like 400px in all usages of the component: How can I overwrite such a variable (for instance in the app's SCSS file*) to adjust the $min-height to 500px? Of course, since it is not a good idea to violate the separation of concerns principle, the component should not make any assumptions how its surrounding directories are organized.

So far I did not find a solution to this problem. But I am sure there are people who did.

*) and how (where) should I load such a file (usually, I load app.scss through app.js)

Answer 1

I think it is not possible to achieve what you want via scss simply because all instances of the component will have the same styles in the end (unless you use multiple classes like Tyler Biscoe suggested). In the end you will have one static css file for the component and all instances will share it.

Consider refactoring your scss to take the $min-height out of scss, make it a parameter of the component and use the inline styles to apply it. For React it would look something like this:

import './MyComponent.scss';

class MyComponent extends Component {
  render() {
    return (
      const divStyle = {
        minHeight: this.props.minHeight
      }
      <div style={divStyle}></div>
    );
  }
}

Then you can just add the component with any width:

class App extends Component {
  render() {
    return (
      <MyComponent minHeight="300px"/>
      <MyComponent minHeight="400px"/>
      <MyComponent minHeight="500px"/>
    );
  }
}

This way you lift the min-height parameter up from MyComponent and let the higher components specify it.

UPDATE:

I guess you can lift the $min-height from mycomponent.scss and set it in parent. Say you have to set $min-height for .my-component css class, in a parent's scss file you could do something like this:

.large-component > .my-component {
  min-height: $large-min-height;
}

.small-component > .my-component {
  min-height: $small-min-height;
}

But again, this does not let you pass a parameter to a component, only set styles based on the component's parent containers.