Ionic-gulp-sass-build - Error: File to import not found or unreadable: ionic.ios

Ionic Framework ionic-v3
1

When I want to generate sass sourcemap I have an error:

 app/theme/app.ios.scss                                                                                                                                                                                                  
    Error: File to import not found or unreadable: ionic.ios                                                                                                                                                                
           Parent style sheet: stdin                                                                                                                                                                                        
            on line 19 of stdin                                                                                                                                                                                             
    >> @import "ionic.ios";

I have ionic-cli 2.0.0-beta.24 and here is gulp task:

gulp.task('sass', function(){
  return buildSass({
    dest: 'www/build/css',
    sassOptions: {
      sourceMap: true,
      outFile: 'www/build/css'
    }
  })
});

Why this not work?

2

Please update your version of ionic. This was fixed in beta 6 i believe.

3

I already have beta 6.

 {
   "dependencies": {
     "angular2": "2.0.0-beta.15",
     "angular2-moment": "^0.5.0",
     "es6-promise": "3.1.2",
     "es6-shim": "^0.35.0",
     "ionic-angular": "2.0.0-beta.6",
     "ionic-native": "^1.1.1",
     "ionicons": "3.0.0",
     "lodash": "^4.11.1",
     "moment": "^2.13.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "zone.js": "0.6.12"
   },
   "devDependencies": {
     "del": "2.2.0",
     "gulp": "3.9.1",
     "gulp-watch": "4.3.5",
     "ionic-gulp-browserify-typescript": "^1.0.1",
     "ionic-gulp-fonts-copy": "^1.0.0",
     "ionic-gulp-html-copy": "^1.0.0",
     "ionic-gulp-sass-build": "^1.0.0",
     "ionic-gulp-scripts-copy": "^1.0.1"
   },
   "cordovaPlugins": [
     "cordova-plugin-whitelist",
     "cordova-plugin-device",
     "cordova-plugin-console",
     "cordova-plugin-splashscreen",
     "ionic-plugin-keyboard",
     "cordova-plugin-statusbar"
   ],
   "cordovaPlatforms": [
     "ios",
     {
       "platform": "ios",
       "version": "",
       "locator": "ios"
     }
   ],
 }
4

I have the same problem in OSX, under windows, the same project works fine, when I try to do something with ionic CLI
shows:

ionic serve

There is an error in your gulpfile: 
Error: ENOENT, no such file or directory '/Users/dev/Projects/APP/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/vendor'
    at Error (native)
    at Object.fs.readdirSync (fs.js:761:18)
    at Object.getInstalledBinaries (/Users/dev/Projects/AOS42_AOV_APP/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/lib/extensions.js:60:13)
    at foundBinariesList (/Users/dev/Projects/AOS42_AOV_APP/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:19:15)
    at foundBinaries (/Users/dev/Projects/AOS42_AOV_APP/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:14:5)
    at Object.module.exports.missingBinary (/Users/dev/Projects/AOS42_AOV_APP/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:44:5)
    at Object.<anonymous> (/Users/dev/Projects/AOS42_AOV_APP/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:14:28)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
5

@matijas @xavibel Could you provide more details, e.g. run ionic info and paste the output here?

6

Now it’s working. I deleted node_modules folder and did npm install and all it’s working, maybe some packages not has been installed correctly.

Thanks!!

7

Thanks for the update, I’m glad you figured it out!

8

Deleting node_modules not help for me, here is the output

Your system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Distributor ID:     LinuxMint Description:  Linux Mint 17.3 Rosa 
Node Version: v4.4.2
9

@matijas Are you getting the error always or only with the sourceMap: true option?

10

I have this error in both cases.

11

I just took a look at the source code of the sass-build task and it seems that there’s a bug - the nested options are not merged but overwritten (which results in not properly resolved paths). I already made a PR that should fix the problem. As a workaround, you could modify your task to pass the default options as well:

gulp.task('sass', function(){
  return buildSass({
    dest: 'www/build/css',
    sassOptions: {
      includePaths: [
        'node_modules/ionic-angular',
        'node_modules/ionicons/dist/scss'
      ],
      sourceMap: true,
      outFile: 'www/build/css'
    }
  })
});
12

Ok, now building works, but source map is not generated and source css is not visible in debugger.

In www/build/css/app.md.css last line is:
/*# sourceMappingURL=css.map */
but source map file not exist :frowning:

According to this https://www.npmjs.com/package/gulp-sass#source-maps
ionic-gulp-tasks ( https://github.com/driftyco/ionic-gulp-tasks/blob/master/sass-build/index.js ) should include extra pipe to generate sourcemap.

13

@matijas Thanks for the update! It seems like a bug. Could you please open an issue about it?

14

Done :slight_smile: