在FountainJS错误中添加Bootstrap-Sass

Question

使用FountainJS生成一个新的角度项目，我在向我的项目添加bootstrap-sass库时遇到了问题。 这是我的生成项目流程：Fountain-> angular1-> bower-> babel-> sass

然后，由于需要使用引导程序，因此我使用Bower安装了它，并使用@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";将其包含在@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; 当我运行gulp serve时，它工作正常，但是当我使用gulp build ，发生了以下错误： Error in plugin 'gulp-cssnano' Message: "bower-components/bootstrap-sass/assets/stylesheets/_bootstrap.scss" is not int the SourceMap那么，这里出了什么问题以及如何解决？

Answer 1

我不确定该修复程序，但是可以帮助您前进的一种解决方法是注释掉或删除gulp.conf.js中的sourcemaps用法。 这将允许您的sass进行编译，但是不会为您的样式代码提供源地图。

以下是标准的gulp.conf.js，其中注释了sourcemaps行。

const gulp = require('gulp');
const browserSync = require('browser-sync');
//const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

const conf = require('../conf/gulp.conf');

gulp.task('styles', styles);

function styles() {
  return gulp.src(conf.path.src('index.scss'))
    //.pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'})).on('error', conf.errorHandler('Sass'))
    .pipe(postcss([autoprefixer()])).on('error', conf.errorHandler('Autoprefixer'))
    //.pipe(sourcemaps.write())
    .pipe(gulp.dest(conf.path.tmp()))
    .pipe(browserSync.stream());
}

Answer 2

在/gulp_tasks/styles.js的第17行，替换此行：

.pipe（sourcemaps.write（））

与：

.pipe（sourcemaps.write（undefined，{sourceRoot：null}））

此问题是由gulp-sourcemaps中的错误（包括来自node_modules或bower_components文件夹中的文件）引起的。