4

Para ser bem claro, eu estou criando um app com ionic 1.3 como aprendizado e estudo para a faculdade, e preciso usar um css e js externo. É uma lib chamada Icheck (Link para o icheck). Já fiz teste com ela em outros projetos, e roda perfeitamente. Porém, não consigo utilizá-la com o ionic.

Li bastante gente falando sobre compilar com sass e tal usar o gulp, peguei até alguns exemplos de código para compilar, pois não conheço muito de gulp, sass ou frontend em geral kkkk.

Parece estar tudo linkado certo e na ordem, porém não compila. Acredito que seja o css. Gostaria de uma ajuda sobre o que devo fazer para usar essa lib no ionic e o por que de simplesmente não colocar um link no index para funcionar?

Meu arquivo index.html, removi os outros arquivos css que o gulp injeta, mas é algo que não afeta o resto, já fiz o teste tanto com ele quanto sem eles.

  <link href="css/ionic.app.css" rel="stylesheet">
  <!-- inject:css -->
  <link rel="stylesheet" href="css/_all.css">
  <!-- endinject -->

Meu arquivo ionic.app.scss está do jeito que veio, e acredito que aqui está a chave para o meu problema, mas até agora não consegui deslumbrar a solução. Já tentei importar o css para que gulp gerasse um arquivo ionic.app.css com todos os css que precisava, mas acho que não funciona dessa forma.

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

Meu arquivo Gulp.js que fiz alguns testes para injetar automaticamente meu arquivo .css direto no meu index, o que funciona bem, porém não renderiza como deveria.

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 inject = require('gulp-inject');

var paths = {
  sass: ['./scss/**/*.scss'], 
  javascript: [
  './www/**/*.js',
  '!./www/js/app.js',
  '!./www/lib/**'
  ],
  css: [
  './www/**/*.css', 
  '!./www/css/ionic.app*.css',
  '!./www/lib/**'
  ]
};

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

gulp.task('index', function(){
 return gulp.src('./www/index.html')
 .pipe(inject(
   gulp.src(paths.javascript,
     {read: false}), {relative: true}))
 .pipe(gulp.dest('./www'))
 .pipe(inject(
   gulp.src(paths.css,
     {read: false}), {relative: true}))
 .pipe(gulp.dest('./www'));
});

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
  .pipe(sass())
  .on('error', sass.logError)
  .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.watch([
   paths.javascript,
   paths.css
   ], ['index']);
});

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();
});

Segue uma imagem de como está a organização atual das minhas pastas e do meu arquivo onde faço os imports dos outros css, mas só para titulo de informação, já tentei linkar esses outros arquivos manualmente no ionic e não rodou também.
Acredito que não seja os arquivos js, pois estou usando outra lib e roda tranquilamente, mas para deixar claro essa lib faz uso de jquery. Ai como está a estutura das pasta e o meu arquivo _all.css

3
  • Você está incluindo o css na index dentro de www ou dentro de templates? Commented 24/10/2016 às 1:31
  • dentro da index. na pasta template só tem as view login browser etc. Commented 25/10/2016 às 20:24
  • amigo o erro ocorre no simulador ou no device? Commented 12/11/2020 às 0:01

2 Respostas 2

-1

Faça:

 <link rel="stylesheet" href="css/line/_all.css">
1
  • Man esse arquivo ai não está dentro dessa pasta está dentro do diretório css/ apasta css/line contem outro arquivos... Commented 6/12/2016 às 19:48
-1

Pelo o que conheço sobre ionic, ele usa de um arquivo .css próprio, que sobrepõe os outros na hora de compilar o código. Se encontrá-lo e tentar deletar o mesmo talvez o programa reconheça os códigos da forma que deveria

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .