0

gulp-sassを使ってSassファイルをコンパイルする際に

~/gluptest ❯ gulp sass
[15:46:37] Using gulpfile ~/Desktop/gluptest/gulpfile.js
[15:46:37] Starting 'sass'...
Error in plugin 'sass'
Message:
    node_modules/sass-graph/test/fixtures/d.scss
Error: File to import not found or unreadable: e
       Parent style sheet: stdin
        on line 1 of stdin
>>@import "e";
  ^

というようなエラーが出ます。
node_modules/sass-graph/test/fixtures/d.scss には

@import "e";

と記述されており
確かに node_modules/sass-graph/test/fixtures 内には e.scss は存在しません。
どうすればよろしいでしょうか。

なお、gulp-sassは

sudo npm install gulp-sass --save-dev

でインストールしました。

また、gulofile.js は、以下のように記述しました

'use strict';

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

gulp.task('sass', function () {
  return gulp.src('./**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./**/*.scss', ['sass']);
});

実行環境

  • OS X 10.11.3
  • node.js v5.7.0
  • npm 3.7.5
  • gulp CLI version 3.9.1 , Local version 3.9.1

1 件の回答 1

1
gulp.src('./**/*.scss')

この記述では、現在のディレクトリ以下の全てのscssファイルをコンパイル対象にしています。そのため、./node_modules/ 内にインストールされたNodeモジュールの、テスト用ファイルもコンパイルしてしまってします。

自分のプロジェクトのファイルをgulp-sassなどでコンパイルする場合は、そのscssファイルを特定のディレクトリの中に置いて、そこだけを対象にコンパイルを行います。例えば・・・

.
|-- src //コンパイル元
| `-- css
|   |-- main.scss
|   |-- sub.scss
|   `-- ...
`-- dest //コンパイル先
  `-- css
    |-- main.css
    |-- sub.css
    `-- ...

という構造にしておいて、

gulp.task('sass', function () {
  return gulp.src('./src/css/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dest/css/'));
});

といった感じに指定します。この場合 ./src/css/ 以下の全てのscssファイルをそれぞれコンパイルし、./dest/css/ 以下に出力します。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。