0

app.scss ファイルに複数の scss ファイルをインポートしようとしていますが、gulp でエラーがスローされます。

//app.scss
@import "base";

body {
   background: #fff;
}

gulpfile.js

gulp.task('build-css', function () {
    return gulp.src(assetsDev + 'scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(postcss([precss, autoprefixer, cssnano]))
        .pipe(sourcemaps.write())
        .pipe(ext_replace('.css'))
        .pipe(gulp.dest(assetsProd + 'css/'));
});

ディレクトリ構造:

├── assets
│   └── scss
│       ├── _base.scss
│       └── app.scss
├── src
│   └── css
│       └── style.css
└── gulpfile.js

そしてgulpはこのエラーをスローしています:

events.js:141
  throw er; // Unhandled 'error' event
  ^
Error: ENOENT: no such file or directory, open '...\assets\scss\_base.css'
at Error (native)
4

1 に答える 1

1

precssステートメントにpostcss-partial-importプラグインを使用します。デフォルトでは、インポートされたパーシャルの拡張子は.@importcss

@importすべてのステートメントで完全なファイル名 (拡張子付き) を指定する必要があります。

@import "_base.scss";

body {
  background: #fff;
}

extensionまたは、オプションをprecss()次のように渡す必要があります。

gulp.task('build-css', function () {
  return gulp.src(assetsDev + 'scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(postcss([precss({extension:'scss'}), autoprefixer, cssnano]))
    .pipe(sourcemaps.write())
    .pipe(ext_replace('.css'))
    .pipe(gulp.dest(assetsProd + 'css/'));
});
于 2016-05-06T14:29:20.637 に答える