使用 precss 插件的 Gulp-postcss 在导入 scss 文件时会抛出错误答案

【问题标题】：Gulp-postcss with precss plugin throws an error when importing scss files使用 precss 插件的 Gulp-postcss 在导入 scss 文件时会抛出错误
【发布时间】：2016-05-06 23:13:26
【问题描述】：

我试图在我的 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)

【问题讨论】：

尝试@import "./_base";
还是不行

标签： node.js npm gulp postcss

【解决方案1】：

precss 将postcss-partial-import 插件用于@import 语句。 By default 它假定导入的部分的扩展名是css。

您需要在所有 @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/'));
});

【讨论】：