I have a dilemma with two SCSS files in my project - one named app.scss and the other app-rtl.scss.
The main distinction between them is that the latter includes SCSS files for handling right-to-left layouts. My goal is to switch to the app-rtl.scss file when the dir attribute is set to rtl.
In terms of technology, I am using Node.js primarily for the backend and React for the frontend.
If anyone has any suggestions on how I can approach this issue, I would greatly appreciate it.
Update:
To elaborate further, I initially used the create-react-app package and then ejected to incorporate SCSS. This is how I currently import the stylesheet (as a single file).
index.js
import '../scss/app.scss'; // importing all styles here
Below is a snippet from the app.scss file:
// Setting default value for $dir as ltr
$dir: ltr;
// Importing helpers and libraries
@import "base/directional";
@import "base/variables";
@import "bootstrap/functions";
@import "bootstrap/mixins";
...
The app-rtl.scss contains various SCSS files specific for right-to-left design.
If I opt to use Webpack, how can I compile these into two separate CSS files and implement the recommended solution provided? Alternatively, if dealing with this through Node.js is more feasible, I am open to exploring that route as well.
P.S: While my knowledge of Webpack is limited, I believe the following configuration could serve the purpose:
{
test: /\.scss$/,
loaders: [
require.resolve('style-loader'),
require.resolve('css-loader'),
require.resolve('fast-sass-loader')
]
},
{
test: /\.css$/,
loaders: [
require.resolve('style-loader'),
require.resolve('css-loader'),
]
}