問(wèn)題描述

我正在使用 Gulp 將我的 sass 編譯成 css.一個(gè)簡(jiǎn)單的任務(wù)編譯 _/sass 目錄中的 style.scss 文件，并將輸出保存到項(xiàng)目的根目錄中.style.scss 僅用于導(dǎo)入 _/sass 目錄下的其他文件.

I'm using Gulp to compile my sass into css. A simple task compiles the style.scss file in the _/sass directory and saves the output into the root of the project. style.scss is used merely to import other files in the _/sass directory.

當(dāng)我從命令行 ($ gulp) 運(yùn)行默認(rèn)任務(wù)時(shí)，我收到一個(gè) sass 無(wú)法編譯的錯(cuò)誤.它全部包含在下面.我已從包含的文件中刪除所有內(nèi)容并再次運(yùn)行該任務(wù).我仍然收到相同的錯(cuò)誤(我在網(wǎng)上閱讀的內(nèi)容表明這可能會(huì)測(cè)試編碼問(wèn)題.我不完全了解編碼以及這可能會(huì)如何破壞我的場(chǎng)景).

When I run the default task from the command line ($ gulp) I get an error that the sass can't compile. It is included below in full. I have removed all content from the included files and run the task again. I still receive the same error (something I read online suggested this might test for an encoding issue. I don't fully understand encoding and how that might break things in my scenario).

我還從命令行 $ sass _/sass/style.scss style.css 運(yùn)行，它與包含文件中的內(nèi)容完美配合.這表明 gulp sass 插件本身存在問(wèn)題.

I've also run from the command line $ sass _/sass/style.scss style.css which works perfectly with content in the included files. This suggests to me a problem with the gulp sass plugin itself.

來(lái)自 gulpfile.js 的相關(guān)片段:

The relevant snippets from 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的全部?jī)?nèi)容:

The full contents of style.scss:

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

目錄結(jié)構(gòu):

├── _
│?? ├── 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'

推薦答案

保持導(dǎo)入不變，只需在 gulp sass 模塊中傳遞 includePaths 選項(xiàng)作為參數(shù):

Keep your imports as is, just pass the includePaths option in your gulp sass module as an argument:

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

...應(yīng)該為你做.

根據(jù) https://github.com/dlmanning/gulp-sass/issues/1

這篇關(guān)于Gulp-sass 無(wú)法編譯 scss 文件的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！