visual-studio - 使用 Gulp 更新 ASP.NET CORE 2 中的 Bootstrap + SASS？

Question

我正在尝试将具有 SASS 功能的 Bootstrap 添加到我的 ASP.NET Core 2 项目中，但很难实现。我使用 NPM 将 Bootstrap 安装到 node_modules 中，然后让 Gulp 将缩小的 css 和 js 依赖项移动到我的 wwwroot 目录中。现在我想要一个 SASS 文件，我可以在其中覆盖 Bootstrap 的默认设置以满足我的需要，这就是我遇到的问题。这是我的 Gulp 代码，'compile-sass' 不工作。我缺少绑定(bind)错误。

const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');

const root = "./wwwroot/";
const bootstrapStyles = "node_modules/bootstrap/dist/css/bootstrap.min.css";
const bootstrapSass = "node_modules/bootstrap/scss/bootstrap.scss";
const bootstrapScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
];

gulp.task('default', ['build-all']);
gulp.task('build-all', ['build-css', 'build-js']);

gulp.task('build-css', () => {
    return gulp.src(bootstrapStyles)
        .pipe(gulp.dest('./wwwroot/'));
});

gulp.task('build-js', () => {
    return gulp.src(bootstrapScripts)
        .pipe(concat('bootstrap.min.js'))
        .pipe(gulp.dest(root));
});

gulp.task('compile-sass', () => {
    gulp.src(bootstrapSass)
        .pipe(sass())
        .pipe(gulp.dest(root));
});

// watch bootstrap-overrides.scss for changes and recompile SASS
gulp.task('watch-sass', () => {
    gulp.watch(root + 'bootstrap-overrides.scss', ['compile-sass']);
});

这是问题的确切摘录:

    gulp.task('compile-sass', () => {
    gulp.src(bootstrapSass)
        .pipe(sass())
        .pipe(gulp.dest(root));
});

编辑:通过运行以下命令解决构建错误:npm rebuild node-sass我的 bootstrap-overrides.scss 编辑没有改变变量值。如何正确编译 SASS？

Answer 1

解决了。

const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const rename = require('gulp-rename');

const root = "./wwwroot/";
const vendorScripts = [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
];

const vendorStyles = "node_modules/bootstrap/scss/bootstrap.scss";
const customerStyleOverrides = root + "scss/*.scss";

gulp.task('default', ['build-vendor']);

gulp.task('build-vendor', ['build-vendor-css', 'build-vendor-js']);

// merge javascripts into a single vendor.min.js file and save it to wwwroot
gulp.task('build-vendor-js', () => {
    return gulp.src(vendorScripts)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest(root));
});

// compile bootstrap and save as vendor.min.css to wwwroot
gulp.task('build-vendor-css', () => {
    return gulp.src([vendorStyles, customerStyleOverrides])
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(rename('vendor.min.css'))
        .pipe(gulp.dest(root));
});

// watch for changes to styles.css and recompile bootstrap on styles change
gulp.task('watch-sass', () => {
    gulp.watch(root + "scss/styles.scss", ['build-vendor-css']);
});