在FountainJS错误中添加Bootstrap-Sass

Question

using fountainjs to generate a new angular project, I have issue in adding bootstrap-sass library to my project. here is the my generate-project flow: Fountain->angular1->bower->babel->sass

then, since I need to use bootstrap, I installed it using bower, and included it in my index.scss with @import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; It works fine when I run gulp serve but when I build it using gulp build , the following error occured: Error in plugin 'gulp-cssnano' Message: "bower-components/bootstrap-sass/assets/stylesheets/_bootstrap.scss" is not int the SourceMap So, what goes wrong here and how to fix that?

Answer 1

I'm not certain of the fix, but a workaround that might help you move along is to comment out or remove the sourcemaps usage in your gulp.conf.js. This will allow your sass to compile, but it won't give you sourcemaps for your style code.

Below is the standard gulp.conf.js with the sourcemaps lines commented out.

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

On line 17 of /gulp_tasks/styles.js, replace this line:

.pipe(sourcemaps.write())

with:

.pipe(sourcemaps.write(undefined, { sourceRoot: null }))

The issue is caused by a bug in gulp-sourcemaps when including files from the node_modules or bower_components folder.