在fountainjs中添加bootstrap-sass错误

Question

使用fountainjs生成一个新的angular项目，我在将bootstrap-sass库添加到我的项目中时遇到了问题。下面是我的generate-project流程:Fountain>Angular1->bower->babel->sass

然后，因为我需要使用bootstrap，所以我使用bower安装了它，并将它包含在我的index.scss和@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中的源地图使用。这将允许您的sass进行编译，但它不会为您的样式代码提供源地图。

下面是注释掉了sourcemaps行的标准gulp.conf.js。

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_task/styles.js的第17行，替换此行：

.pipe(sourcemaps.write())

通过以下方式：

.pipe(sourcemaps.write(未定义，{ sourceRoot: null }))

该问题是由包含node_modules或bower_components文件夹中的文件时gulp源地图中的错误引起的。