2015-06-21 34 views
5

Sto cercando di utilizzare SASS nel mio progetto. Apro questo link e seguo tutti i comandi. Creo un progetto e installo SASS. http://learn.ionicframework.com/formulas/working-with-sass/Come usare SASS nella struttura ionica?

ho avuto questa struttura di directory

scss 
    | 
    |—>ionic.app.scss 
    www 
    | 
    |->css 
      | 
      |——>ionic.app.css 

In index.html file importato ionic.app.css in style tag. Quindi qualunque cosa io cambi nel file ionic.app.scss viene ionic.app.css file e riflettere in vista.

Se posso aggiungere qualche elemento in index.html, per esempio ho aggiunto tag di paragrafo in <ion-content>:

<ion-pane> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Ionic Blank Starter</h1> 
    </ion-header-bar> 
    <ion-content> 
     <p id=“addp”>Testparagraph</p> 
    </ion-content> 
</ion-pane> 

e ha aggiunto questa

#addp{ 
background-color:yellow; 
} 

in ionic.app.scss, è aggiunto in ionic.app.css e riflettere In vista.

Ora quello che provo a fare. Voglio aggiungere il proprio file "application.scss" nella cartella sass che dovrebbe creare un altro file "application.css" nella cartella css. Quindi qualunque cosa io codifichi in "application.scss" viene nel file "application.css" e riflette in vista. Importo "application.css" nel file index.html.

Dove scrivo questo codice per generare questo file e guardare il file "application.scss".

Quando eseguo il server ionico e cambio qualcosa nel file "ionic.app.scss", questo viene visualizzato sullo stesso tempo. Ho bisogno di fare lo stesso con "application.scss". Se cambio "application.scss" rifletterà sulla mia vista.

Questa miei gulpfile.js

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var bower = require('bower'); 
var concat = require('gulp-concat'); 
var sass = require('gulp-sass'); 
var minifyCss = require('gulp-minify-css'); 
var rename = require('gulp-rename'); 
var sh = require('shelljs'); 

var paths = { 
    sass: ['./scss/**/*.scss'] 
}; 

gulp.task('default', ['sass']); 

gulp.task('sass', function(done) { 
    gulp.src('./scss/ionic.app.scss') 
    .pipe(sass({ 
     errLogToConsole: true 
    })) 
    .pipe(gulp.dest('./www/css/')) 
    .pipe(minifyCss({ 
     keepSpecialComments: 0 
    })) 
    .pipe(rename({ extname: '.min.css' })) 
    .pipe(gulp.dest('./www/css/')) 
    .on('end', done); 
}); 

gulp.task('watch', function() { 
    gulp.watch(paths.sass, ['sass']); 
}); 

gulp.task('install', ['git-check'], function() { 
    return bower.commands.install() 
    .on('log', function(data) { 
     gutil.log('bower', gutil.colors.cyan(data.id), data.message); 
    }); 
}); 

gulp.task('git-check', function(done) { 
    if (!sh.which('git')) { 
    console.log(
     ' ' + gutil.colors.red('Git is not installed.'), 
     '\n Git, the version control system, is required to download Ionic.', 
     '\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', 
     '\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' 
    ); 
    process.exit(1); 
    } 
    done(); 
}); 

risposta

0

Idealmente il vostro application.scss dovrebbe avere solo le variabili utilizzate dal file l'altra personalizzati .scss, con l'idea, si cambia un valore e cambierà il tutto i file .scss.

e il processo gulp consente di compilare tutti i file in un file css minificato.

Dai un'occhiata alla, ionic scss folder e la loro variables file

e le variabili utilizzate nel _variables.scss è uguale a ionic.app.scss. puoi avere tutte le variabili definite in _variables.scss in ionic.app.scss.

Speranza u avere un'idea su come ionica fa, così si potrebbe seguire la stessa struttura

+0

si didnot ottenere la mia domanda ho bisogno di aggiungere un altro file .Se non sono interessati a lavorare con _variables.scss o ionic.app.scss file.I volete aggiungere questo application.scss nella mia cartella sass, che dovrebbe generare un altro file css. Quel file css verrà importato su index.html –

+0

Ma quando aggiungo application.scss in sass folder processo gulp non guarda il mio file.Non riflette sulla vista html –

+2

devi cambiare la linea 'gulp. src ('./ scss/ionic.app.scss') 'a' gulp.src ('./ scss/*. scss') ', per selezionare qualsiasi file .scss – sameera207

0

non so come cambiare in sorso, ma ho aperto un altro terminale e ho usato sass --watch funzione (es: sass --watch scss/application.scss: www/css/application.css), ogni volta che se si apportano modifiche in application.scss si aggiornerà automaticamente nel progetto.

0

Modifica gulp.src('./scss/ionic.app.scss') a gulp.src(paths.sass).

Ciò creerà automaticamente tutti i file .scss in quella cartella o qualsiasi sottocartella in un file .css corrispondente in/www/css /. Il tuo attuale file Gulp sta costruendo ionic.app.css e un ionic.app.min.css, dove il secondo è stato minimizzato per la dimensione del file più piccola possibile. Farà lo stesso per qualsiasi altro file. Sarai in grado di scrivere semplicemente /scss/application.scss e di averne cura.

Se si desidera risparmiare un sacco di problemi, è possibile utilizzare questa alternativa per creare tutti i file SCSS in un singolo file build.css e build.min.css.

gulp.task('sass', function(done) { 
    gulp.src(paths.sass) 
    .pipe(sass({ 
     errLogToConsole: true 
    })) 
    .pipe(concat('build.css')) 
    .pipe(gulp.dest('./www/css/')) 
    .pipe(minifyCss({ 
     keepSpecialComments: 0 
    })) 
    .pipe(rename({ extname: '.min.css' })) 
    .pipe(gulp.dest('./www/css/')) 
    .on('end', done); 
}); 
Problemi correlati