Example app using rtl-css-loader and webpack-rtl-plugin.
# clone the repo
$ git clone [email protected]:romainberger/webpack-rtl-example.git
$ cd webpack-rtl-example
# install the dependencies
$ npm installThe app uses the rtl-css-loader for dev and webpack-rtl-plugin for prod.
# run the webpack compilation
npm run webpack-dev
# run the development server
npm run start-devThen open your browser at http://localhost:3000.
For development, we use the style-loader to dynamically add style tags. If you check out the head in your browser you will see some style tags added.
# build the assets with webpack
npm run webpack
# run the server
npm startThen open your browser at http://localhost:3000.
For production we use the extract-text-webpack-plugin to create a real stylesheet, and the webpack-rtl-plugin will create a duplicate stylesheet but for right-to-left languages. If you inspect the page you will see the stylesheet used depending on the direction: app.css if you are on ltr, and app.rtl.css for rtl.