Mixins exists check in scss which is imported dynamically is not working - html

Question

For the implementation of RTL and LTR styles using scss I created two scss files _ltr.scss and _rtl.scss and based on the country selection of user in the application, I dynamically import the corresponding stylesheet.
_ltr.scss
$start-direction: left;
#mixin paddingStart($val) {
padding-#{$start-direction}: $val;
}
_rtl.scss
$start-direction: right;
#mixin paddingStart($val) {
padding-#{$start-direction}: $val;
}
main.js //where country switch happening
const root = document.documentElement;
root.classList.remove('rtl');
root.classList.add('ltr');
if (USER COUNTRY DIR VALUE === 'RTL') {
root.classList.remove('ltr');
root.classList.add('rtl');
}
_main.scss
html.ltr {
#import '_ltr.scss';
}
html.rtl {
#import '_rtl.scss';
}
#if mixin-exists(paddingStart) { //NOT WORKING
#include paddingStart(10px)
}
This is how I dynamically import the scss, and it works correctly. But the mixin exists if statement is always failing. Is there any ways to make the mixin work as expected in SCSS? Or any options to implement this LTR and RTL style better way. Because in my case user can change the country and based on his selection I have to load the styles dynamically.

Answer 1

SCSS is compiled before arriving to the browser and deployed, Javascript is run after it arrived to the browser. You are trying to modify SCSS with Javascript something that doesn't really exist.
What you need is to have both rtl.scss ltr.scss loaded at the same time, and apply the rules depending on the direction.
For rtl the easier way is to create a mixin where you can set/modify rules if the site is in rtl.
#mixin rtl {
body:dir(rtl) &{
#content;
}
}

Answer 2

You shouldn't type .scss when importing files. https://sass-lang.com/documentation/at-rules/import#importing-css
html.ltr {
#import 'ltr';
}
html.rtl {
#import 'rtl';
}