CODEWITHSUNDEEP
ionic-frameworkgulp-sassgulp-sourcemaps
Brad W
Brad W

Reputation: 2558

Unable to load ionic css file(s) compiled from sass (.scss) using gulp-sass

I'm trying to move an application over from a Grunt build to Gulp. My Gulp build generates a ionic.css file which I attempt to load with a link tag in my index.html. I get an error in my chrome inspector that the file is not found at that path even though I can see in my www folder that it is.

My Code

gulp-sass task

gulp.task('styles', ['clean-styles'], function () {
  gulp.src( './app/lib/scss/ionic/ionic.scss' ) //get the sass files
    .pipe(sourcemaps.init())                    //load internal sourcemap
      .pipe(sass())                             //convert sass to css
    .pipe(sourcemaps.write())                   //write inline sourcemap
    .pipe(gulp.dest( './www/lib/css/' ));       //push the css to www/lib/css 
});

index.html head

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/css/ionic.css" rel="stylesheet">
  </head>

My directory structure

my_app
    -app
        -lib
            -fonts
            -js
            -scss
        -src
            -images
            -scss
            -page_view1
                -templates
                page_view1_controller.js
            -page_view2 
                -templates
                page_view2_controller.js
-hooks
-node_modules
-platforms
-plugins
-www
    -img
    -js
    -lib
        -css
            ionic.css
        -fonts
            -ionic
                ionicons.eot
                ionicons.svg
                ionicons.ttf
                ionicons.woff
        -js
            -angular
            -angular-animate
            -angular-bootstrap
            -angular-sanitize
            -angular-ui-router
            -collide
            -ionic
                ionic-angular.js
                ionic.bundle.js
                ionic.js
            -ngCordova
   cordova.js
   cordova_plugins.js
   device.js
   keyboard.js
   index.html
gulpfile.js
ionic.project
package.json

Upvotes: 0

Views: 1240

Answers (1)

paul.isache
paul.isache

Reputation: 11

There is a problem with gulp minify install gulp uglify

Upvotes: 1

Related Questions