ExtJs View with multiple style (scss) for each language

Question

My ExtJs application has to be multilingual.

On the login page, I asked the user to select the language from a dropdown list.

the current structure of my application files as the following

[app]
  [classic]
    [src]
      [view]
        [customers]
          customerController.js
          customerView.js
          customerView.scss

How can I have multiple scss files for the same view ?

For example customerView.scss to be a general file loaded all the time, customerView.en.scss to be English specific, only when the user selects English on the login page, and customerView.es.scss only when the user selects Spanish on the login page

Or is there any better idea?

Answer 1

The easeiest way might be to add a class to the viewport:

Ext.getBody().addCls('language-en')

Inside your scss files you add:

.language-en {
    .customer-view {
    }
}

.language-de {
    .customer-view {
    }
}

Otherwise you have to get into the build.xml and into the fashion builder.

In the fashion builder you have to rearrange the build.