implement to exist project

[icoffe01]

Hi, thank you for this project, it's awesome i joined later to exist project, build as SPA (single page app) by AngularJS with ltr direction with following scss structure : _bootstrap.min.scss _login.scss _custom.scss screen.scss how i can implement bi-app-sass now ? should i rename it like this : app-ltr.scss
app-rtl.scss
_app.scss

Thank you

[anasnakawa]

Your files should look like the following:

_bootstrap.min.scss
_login.scss
_custom.scss
_screen.scss
screen-ltr.scss
screen-rtl.scss

It does not matter wither you name your files app or screen, at the end its just a naming convention,

in your screen-ltr.scss you'll have:

@import 'bi-app-ltr';
@import 'screen';

and on the rtl you'll have:

@import 'bi-app-rtl';
@import 'screen';

Hope that helped.

[icoffe01]

Hi, @anasnakawa thank you for support, i did as you explain, so now i copied screen.scss content and paste it on _screen.scss, but there is some import like this : @import "bootstrap.min"; @import "login"; @import "custom";

this is enough !! what about css attributes on ( _custom.scss ) how i can fix it to compile automatically like ( screen-ltr.scss + screen-rtl.scss ) ? i hope my question clear ? thank you again 👍

[anasnakawa]

if you're talking about CSS properties in other imported files ( margin-left, margin-right, ... etc )

you will have to update them manually using bi-app-sass mixins,

In case you have a lot of code, and it won't be easy to update them, I would recommend using a tool like this to automatically convert your ltr stylesheets into rtl instead of using bi-app-sass