How to integrate `rtlcss` into an Angular App.

rtlcss-angular-integration.md

Here's a solution using the ngx-build-plus pkg. (ng version: 9.1.6 )

1. add ngx-build-plus to your angular project:

ng new myapp --style=scss --routing
cd myapp
ng add ngx-build-plus

2. create a webpack.partial.js file in root of the project directory, and put the following in it:

const rtlcss = require('rtlcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {plugins: [autoprefixer, rtlcss]}
            }
          },
          'sass-loader',
        ],
      },
    ],
  },
};

3. install required packages: npm i postcss postcss-loader rtlcss autoprefixer -D
4. run ng serve --extra-webpack-config webpack.partial.js -o

Done. Now all of your *.scss files will go through rtlcss and autoprefixer.

Thank you so much for your time