使用@import 编译 sass 时出现错误 "Invalid UTF-8"

Question

我的项目具有以下结构：

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

我使用 gulp-sass 将 app.scss 编译为 app.css，我想在 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));
})

然后我在app.scss文件中白:

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

当我运行 gulp 时，我得到：

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

怎么了？

Answer 1

在您的 IDE 中将文件编码设置为 UTF-8，默认情况下可能是其他设置，sass 将其解释为 UTF-8

Answer 2

我认为您的文件夹路径中有一个 UNIX 不支持的字母？尝试删除它。

我通过从文件夹名称中删除字母“ä”来消除此错误。

Answer 3

我只需要重命名 windows 用户名，因为它包含 UNIX 不支持的字符。但是因为重命名用户的文件夹太难了，所以我只是移动了我的项目。

Answer 4

尝试替换 gulp-sass 的 package.json，而不是 "node-sass": "^3.4.2" 和 "node-sass": "^3.5.0-beta.1"

这对我有用！

使用@import 编译 sass 时出现错误 "Invalid UTF-8"

Error "Invalid UTF-8" when compiling sass with @import

css

sass

zurb-foundation

gulp