Skip to content

Instantly share code, notes, and snippets.

Last active March 23, 2023 16:31
Show Gist options
  • Save m-ahmadi/e9e0c096fae875629ca8397ff4f59253 to your computer and use it in GitHub Desktop.
Save m-ahmadi/e9e0c096fae875629ca8397ff4f59253 to your computer and use it in GitHub Desktop.
How to integrate `rtlcss` into an Angular App.

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
  1. 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]}
  1. install required packages: npm i postcss postcss-loader rtlcss autoprefixer -D
  2. run ng serve --extra-webpack-config webpack.partial.js -o

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

Copy link

catalinadorneanu commented Mar 22, 2023

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)

Copy link

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

Copy link

Thank you so much for your time

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment