Problem with SASS interpolation

[amraei]

I search through issues but didn't find any related one. I want to use your great package to make bootstrap sass files RTL. If I run rtlcss _alert.scss I get this error:

rtlcss: error processing file /var/www/bootstrap/_alert.scss
CssSyntaxError: /var/www/bootstrap/_alert.scss:30:12: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

  28 | 
  29 | @each $color, $value in $theme-colors {
> 30 |   .alert-#{$color} {
     |            ^
  31 |     @include alert-variant(theme-color-level("$color", $alert-bg-level), theme-color-level("$color", $alert-border-level), theme-color-level("$color", $alert-color-level));
  32 |   }

Am I doing something wrong?

[jjlharrison]

Yes, RTLCSS converts CSS, not SCSS. You need to compile the SCSS to CSS before running it through RTLCSS.

[amraei]

@jjlharrison So if the project is based on SCSS and there is no control over compiled CSS files, is there a way to use rtlcss as a post-processor to manipulate the compiled CSS of Webpack output?

[jjlharrison]

@amraei: Sorry, I've never used RTLCSS with Webpack before.

[MohammadYounes]

@amraei Yes, you can convert all generated CSS assets by adding a plugin.