Обновлен Bootstrap + SASS в ASP.NET CORE 2 с помощью Gulp?

Я пытаюсь добавить Bootstrap с возможностью SASS в свой проект ASP.NET Core 2, но мне трудно это сделать. Я использовал NPM для установки Bootstrap в node_modules, а затем заставил Gulp переместить минимизированные зависимости css и js в мой каталог wwwroot. Теперь я хочу иметь файл SASS, в котором я переопределяю значения Bootstrap по умолчанию в соответствии со своими потребностями, и здесь я застрял. Вот мой код Gulp, 'compile-sass' не работает. Я получаю отсутствующую ошибку привязки.

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?


visual-studio asp.net-core gulp gulp-sass
person haosmark    schedule 13.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Решил это.

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']);
});
person haosmark    schedule 14.04.2018
comment
Мне нужно было сделать что-то подобное, но я хотел просто вывести свой собственный загрузочный css, используя мой _variables.scss. Это было полезно codevoila.com/post/32 / - person domshyra; 22.05.2018