ExtJS Theming Multiple CSS Files

Question

Dans les versions antérieures d'ExtJS, compass compile compilait chaque fichier sass placé dans le resources/sass dans un fichier CSS distinct. Par exemple:

app.scss ---> app.css

login.scss ---> login.css

Je me demande si je peux accomplir quelque chose de similaire en utilisant la nouvelle structure thématique dans ExtJS 4 (spécifiquement 4.2.1), et l'ont bien intégré avec l'ensemble du processus de construction couvert par Sencha Cmd (exécutant sencha app build).

Answer 1

Le processus de construction Sencha Cmd compilera automatiquement tous les fichiers SASS dans le répertoire de construction de l'application. Dans le processus de construction standard, Sencha Cmd génère des fichiers SASS pour le thème automatiquement et les place dans le dossier de construction, mais vous pouvez également utiliser l'intégration Ant de Sencha Cmd pour copier vos propres fichiers SASS.

Supposons que vous avez un tas de feuilles de style SASS stockées dans un répertoire sass/stylesheets que vous voulez compiler:

Project 
-> app 
-> build 
    -> production 
    -> testing 
-> resources 
-> sass 
    -> etc 
    -> example 
    -> src 
    -> var 
    -> stylesheets 
-> build.xml 

Tout ce que vous devez faire est d'ajouter la cible suivante dans votre fichier build.xml, qui copie tout .scss fichiers dans ce dossier dans votre répertoire de construction avant la compilation SASS:

<target name="-before-sass"> 
    <copy todir="${build.dir}"> 
     <fileset dir="${app.dir}/sass/stylesheets"> 
      <include name="*.scss"/> 
     </fileset> 
    </copy> 
</target> 

Puis, après l'exécution de sencha app build, vous devriez voir une copie de vos fichiers Sass build/production et le CSS compilé sous build/production/resources.

Answer 2

si vous avez généré votre application à l'aide sencha-cmd, vous verrez les répertoires suivants:

MyProject 
--> app 
--> build 
--> ext 
--> overrides 
--> packages 
--> resources 
--> saas 
    - etc 
    - example 
    - src 
    - var 

vous pouvez vous placer css styles dans le répertoire src. rappelez-vous que le chemin et le nom de fichier doivent correspondre au chemin en tant que vue.

exemple: si vous avez un LoginView.js sous votre app/view/, vous devez ajouter les styles CSS sur LogonView.scss sous sass/src/view/.