dsebastien/modernWebDevBuild

gulp-sass task failure in dist build (wrong base path)

Myrmex opened this issue · 3 comments

Myrmex commented

I'm using this template as a start point for learning Angular2 (and all those JS-related tools), and I find it very useful dealing with JSPM, which lets me install packages by just running a JSPM install command. Yet, I'm not able to create a dist build for my test code, which works fine in development environment, because of the gulp-sass task failure in locating my additions to the vendors.scss file.

This task works fine in gulp serve, using these relative paths (as you can see, I added all these packages with JSPM):

@import "./jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap.css";
@import "./jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap-theme.css";
@import "./jspm_packages/npm/font-awesome@4.5.0/scss/font-awesome.scss";
@import "./jspm_packages/npm/toastr@2.1.2/toastr.scss";

When instead I run gulp serve-dist, it seems that the relative paths are differently based, so that I get failures like the one pasted below: my project root folder is c:\projects\46\pronuovi\mitdemo3, yet the task looks for files under the parent folder of this one.

Starting 'styles-dist'...
Trace: { [Error: ENOENT: no such file or directory, open 'C:\Projects\46\Pronuov
i\jspm_packages\github\twbs\bootstrap@3.3.6\css\bootstrap.css']
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Projects\\46\\Pronuovi\\jspm_packages\\github\\twbs\\bootstrap@3.3.
6\\css\\bootstrap.css' }
    at onResolvePath (C:\Projects\46\Pronuovi\MitDemo3\node_modules\gulp-cssimpo
rt\gulp-cssimport.js:85:13)
    at ReadFileContext.callback (C:\Projects\46\Pronuovi\MitDemo3\node_modules\g
ulp-cssimport\helper.js:87:3)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:303:13)
C:\Projects\46\Pronuovi\MitDemo3\node_modules\gulp-cssimport\gulp-cssimport.js:8
6
                                throw err;
                                ^

Error: ENOENT: no such file or directory, open 'C:\Projects\46\Pronuovi\jspm_pac
kages\github\twbs\bootstrap@3.3.6\css\bootstrap.css'
    at Error (native)
Myrmex commented

Thanks, maybe these further notes can be useful: only this code worked for me (../ instead of ../../ like in the commented out sample). Also, I had to link the compiled CSS for FontAwesome and Toastr, as it seems that every import which in turn has imports raises the error "Syntax error: File to import not found or unreadable". Finally, no vendor.min.css is generated, so I get a 404 when launching, but this does not seem to affect the app.

@import "../jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap.css";
@import "../jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap-theme.css";
//@import "../jspm_packages/npm/font-awesome@4.5.0/scss/font-awesome.scss";
@import "../jspm_packages/npm/font-awesome@4.5.0/css/font-awesome.css";
//@import "../jspm_packages/npm/toastr@2.1.2/toastr.scss";
@import "../jspm_packages/npm/toastr@2.1.2/build/toastr.css";

dsebastien commented

Ah yep indeed, imports of imports can be an issue, I hadn't thought of that.