问题 Gulp-sass无法编译scss文件


我正在使用Gulp将我的sass编译成css。一个简单的任务编译 style.scss 文件中 _/sass 目录并将输出保存到项目的根目录中。 style.scss 仅用于导入其中的其他文件 _/sass 目录。

当我从命令行运行默认任务时($ gulp)我得到一个sass无法编译的错误。它包含在下面。我已从包含的文件中删除所有内容并再次运行该任务。我仍然收到相同的错误(我在网上看到的建议这可能会测试编码问题。我不完全理解编码以及这可能会破坏我的场景中的事情)。

我也从命令行运行 $ sass _/sass/style.scss style.css 它与包含文件中的内容完美配合。这告诉我gulp sass插件本身存在问题。

来自gulpfile.js的相关片段:

var gulp = require('gulp');
var sass = require('gulp-sass');

// Compile sass files
gulp.task('sass', function () {
    gulp.src('./_/sass/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'));
});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('sass');

  // Watch files and run tasks if they change

  gulp.watch(['./_/sass/style.scss'], function() {
    gulp.run('sass');
  })
});

style.scss的全部内容:

/* RESET */
@import '_/sass/reset';
/* TYPOGRAPHY */
@import '_/sass/typography';
/* MOBILE */
@import '_/sass/mobile';
/* MAIN */
@import '_/sass/main';

目录结构:

├── _
│   ├── inc
│   │   ├── stuff
│   ├── js
│   │   ├── otherstuff.js
│   └── sass
│       ├── main.scss
│       ├── mobile.scss
│       ├── print.scss
│       ├── reset.scss
│       ├── style.scss
│       └── typography.scss
├── gulpfile.js
└── style.css

终端吐出:

[gulp] Using file /Users/jeshuamaxey/project/dir/path/gulpfile.js
[gulp] Working directory changed to /Users/jeshuamaxey/project/dir/path/html5reset
[gulp] Running 'default'...
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 3.18 ms
[gulp] Finished 'default' in 8.09 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
source string:11: error: file to import not found or unreadable: 'reset'

8998
2018-01-06 19:48


起源

编辑包含style.scss的全部内容 - Jeshua


答案:


保持你的进口原样,只需通过 includePaths 你的gulp sass模块中的选项作为参数:

gulp.src('./_/sass/style.scss')
        .pipe(sass({ includePaths : ['_/sass/'] }))
        .pipe(gulp.dest('./'));

......应该为你做。

按照 https://github.com/dlmanning/gulp-sass/issues/1


15
2018-01-08 21:23



谢谢。这解决了我遇到的特殊问题。可悲的是,我的配置仍未按预期工作,但我会坚持下去。我很喜欢Gulp的样子 - Jeshua
这是唯一对我有用的东西。谢谢! - sean


为此,您需要从相同的gulpfile.js文件夹开始

@import '_/sass/reset'

我认为Gulp读取导入并从gulpfile.js所在的位置找到该文件


0
2018-01-07 04:57



可悲的是,这不起作用:( - Jeshua
Gulp-sass刚刚更新了新功能,允许我们为@import包含路径 npmjs.org/package/gulp-sass - max li


如果在Windows中使用Sublime文本,则应在Sunlime配置中添加规则。只需添加 "atomic_save" : true 在首选项>设置 - 用户中

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes#partials-sporadically-not-found


0
2018-06-07 10:04