I am currently working on a multi-language project using create-react-app. My goal is to incorporate a library like "cssJanus" or "rtlcss" to transform the Sass generated CSS file into a separate file. This way, I can utilize the newly created file when switching between languages.
This is an overview of my index.js file:
import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import App from "./App";
import { configureStore } from "./store/configureStore";
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
Below is what my "App.js" file looks like:
import React, { Component } from "react";
import "./App.scss";
import { Route, Switch } from "react-router-dom";
import SignIn from "./features/signin/SignIn";
class App extends Component {
render() {
return (
<>
<Switch>
<Route path="/" exact component={SignIn} />
</Switch>
</>
);
}
}
export default App;
In my current setup, I am using the "./App.scss" file which contains several @import statements pointing to other ".scss" files within the "./src/css/" directory:
/* autoprefixer grid: on */
@import "css/reset";
@import "css/variables";
@import "css/global";
I would greatly appreciate your advice on how to achieve this transformation process. Specifically, I need guidance on converting the CSS generated from App.scss to RTL and saving them into their respective .css files. Furthermore, I aim to toggle between these generated CSS files based on a change in the global state.
Despite thorough research efforts, I have been unable to find a suitable solution for this task. If you have any alternative suggestions or better approaches, I am open to hearing them.