Open dsuriano opened 5 years ago
Version the app in GitHub or SVN or any other similar repo, then create a script to monitor the changes by updating it to a folder regularly; upon there is an addition or an update of any of the mentioned files trigger a rule to process them as desired and push the changes back to your repo.
@masanzsa That would work fine for a production build process using webhooks, but not so well for a local development environment while constantly tweaking code and testing the results.
I specifically need something for local development that integrates into create-react-app
.
@dsuriano Did you find a solution to this? I'm facing the same issue, I need to use this package with create-react-app, and I would like to have two CSS files to switch between them based on a state prop in both development and production.
@Shaker-Hamdi Unfortunately my deadlines prevented me from implementing a solution. I ended up manually converting 15-20 files and it helped put me into the habit of writing any future styles with RTL support in mind from the start.
My initial thoughts for a solution were something along the lines of writing a small Node script, using npm-watch
, or something like Rollup.js that would watch for changes in scss
or css
files, then run rtlcss
with the desired configs. Once you have that working, you could add the new script to your package.json
scripts definition. Something like:
{
"scripts": {
"start": "react-scripts start && add-the-new-script-here"
}
}
Good luck! And if you stumble across a solution, let me know.
Here's a solution using craco:
craco.config.js
in root of your project and put the following in it:
const rtlcss = require('rtlcss');
module.exports = { style: { postcss: { plugins: [rtlcss] } } };
2. edit the `scripts` field of your project's `package.json`:
```json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
},
install needed packages: npm i @craco/craco rtlcss sass -D
run npm start
Done.
Problem with the above solution is that, RTLCSS requires PostCSS 8. create-react-app is not supporting PostCSS 8 now. Hence its throwing an error
Problem with the above solution is that, RTLCSS requires PostCSS 8. create-react-app is not supporting PostCSS 8 now. Hence its throwing an error
Downgrade your rtlcss to use version 2.6.2
Here's a solution using craco:
- create a
craco.config.js
in root of your project and put the following in it:const rtlcss = require('rtlcss'); module.exports = { style: { postcss: { plugins: [rtlcss] } } };
- edit the
scripts
field of your project'spackage.json
:"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", },
- install needed packages:
npm i @craco/craco rtlcss sass -D
- run
npm start
Done.
It doesn't work. craco: 7.0.0-alpha.7 rtlcss: 3.5.0
I'm developing an app that I would like to integrate
rtlcss
into that usescreate-react-app
and its default settings. I'm trying to avoid ejecting or installing a new task manager or build system (ie: grunt/gulp).My goal is to have
rtlcss
run whenever a change is detected within any.scss
or.css
file, in order to simultaneously dev/test without having to manually run thertlcss
from the CLI every time.Does anyone have recommendations on what is the best way to achieve this goal?