Error “Invalid UTF-8” when compiling sass with @import

问题

There's my project with the folowing structire:

project
  assets
    scripts
    styles
      app.scss
  bower_components
  node_modules
  public
    css
      app.css
    js
  bower.json
  gulpfile.js
  package.json

I use gulp-sass to compile app.scss to app.css and i want to include foundation in app.scss

gulp.task('styles', function() {
    return gulp.src(path.src.styles)
    .pipe(sass({
        includePaths: ['./bower_components/foundation/scss']
    }))
    .pipe(concat('app.css'))
    .pipe(gulp.dest(path.public.styles));
})

Then I white in app.scss file:

@import 'foundation/_settings';
@import 'foundation';

And when i run gulp, I get:

Error: assets\styles\app.scss
  undefined:undefined  Invalid UTF-8

What's wrong?

回答1:

I think you have a UNIX unsupported letter in your folder path ? Try removing it.

I removed this error by removing the letter "ä" from the folder name.

回答2:

set file encoding to UTF-8 in your IDE, it is probably something else by default and sass is interprets it as UTF-8

回答3:

I just had to rename windows user name, because it contained UNIX unsupported characters. But because it was too difficult to rename the folder of user, I just moved my project.