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();
});
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 –
Ma quando aggiungo application.scss in sass folder processo gulp non guarda il mio file.Non riflette sulla vista html –
devi cambiare la linea 'gulp. src ('./ scss/ionic.app.scss') 'a' gulp.src ('./ scss/*. scss') ', per selezionare qualsiasi file .scss – sameera207