Как я могу заставить gulp-sass компилировать bootstrap CSS определения, а не просто выводить оператор импорта? - PullRequest
Новая
       13

Как я могу заставить gulp-sass компилировать bootstrap CSS определения, а не просто выводить оператор импорта?

0 голосов
/ 13 января 2020

Я пытаюсь получить источник Sass bootstrap (.S CSS), выполнить некоторые настройки (через другой .S CSS) и выплюнуть файл CSS.

Я пытался использовать Gulp, чтобы сделать это VS2019, используя gulp-sass. Я следовал многим урокам и придумал следующий gulpfile. js

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');


gulp.task('sass', function () {
    return gulp.src('./Main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

В моем Main. css У меня есть следующее: 

$theme-colors: ( "primary": #fd7e14 );

@import "//lib/bootstrap-4.4.1/scss/bootstrap";

body {
    color: #5CFF54;
    background: rgb(92,18,18);
    height: 400vh;
}

Однако, генерируемый файл содержит следующее: 

@import "//lib/bootstrap-4.4.1/scss/bootstrap";
body {
  color: #5CFF54;
  background: #5c1212;
  height: 400vh; }

Я ожидал, что он вытянет все отдельные стили в созданный файл CSS, а не просто добавит импорт.

Кто-нибудь может указать мне правильное направление?

1 Ответ

0 голосов
/ 14 января 2020

После долгих тралений по inte rnet я обнаружил, что это ожидаемое поведение и связано с тем, как я ссылаюсь на исходный файл bootstrap .s css.

Короче Я ссылаюсь на него с помощью веб-пути, это приводит к добавлению оператора импорта в созданный файл. css. Если я изменю ссылку на путь к файловой системе, такой как этот: 

@import "../lib/bootstrap-4.4.1/scss/bootstrap";

, он будет работать так, как я надеялся, и полученный файл. css включает все определения из bootstrap .s css .

...