Ionic doesn’t recognize my css

Question

To be clear, I’m creating an app with ionic 1.3 like learning and studying for college, and I need to use a css and js external. It is a lib calling for Icheck (Link to the icheck). I have already tested with her in other projects, and runs perfectly. However, I can not use it with the ionic.

I read a lot of people talking about compiling with sass so use the gulp, I even took some examples of code to compile, because I don’t know much about gulp, sass or frontend in general kkkk.

Everything seems to be linked right and in order, but does not compile. I believe it is the css. I’d like some help on what I should do to use this lib in the ionic and why not just put a link on index to work?

My file index.html, I removed the other files css that the gulp injects, but it is something that does not affect the rest, I have done the test both with him and without them.

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

My file ionic.app.scss It’s the way it came, and I believe that here is the key to my problem, but so far I haven’t been able to dazzle the solution. I’ve tried to import the css why gulp generate a file ionic.app.css with all the css but I don’t think it works that way.

/*
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";

My file Gulp.js I did some tests to automatically inject my file .css right into my index, which works well, but does not render as it should.

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

Follow an image of how is the current organization of my folders and my file where I make the Imports of others css, but just for information title, I have already tried to link these other files manually on ionic and didn’t turn either.
I believe it’s not the files js, because I’m using another lib and runs smoothly, but to make it clear lib makes use of jquery.

Answer 1

Do:

 <link rel="stylesheet" href="css/line/_all.css">

Answer 2

From what I know about ionic, he uses from a file .css own, which superimposes others when compiling the code. If you find it and try to delete it maybe the program will recognize the codes the way it should