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.

Hi, does this solution require to have webpack installed? I'm using Angular CLI 13 and even if I'm doing everything as you said, it says that they can't find the module. I can't understand what's missing. (also I'm new to all this)

yes, because angular uses webpack internally

but if you initialized your project with ng cli then it installs and sets everything up for you
so you don't (usually) deal with installing webpack manually
but I don't know the state of your project or the sequence of events up till this point
(maybe your node_modules folder got modified as a result of some other things)

but for reference, I just re-tested the steps of this solution with ng cli version 15.2.4 and everything works as expected

here's some things you can try

1. run npm i in your project

2. make a new blank project with your current ng cli (v13.x.x) and try the steps again and see if you get the same error

3. install latest ng cli (15.2.4) and make a new blank project and try the steps again

Thank you so much for your time