Gulp не компилирует ВСЕ файлы sass - PullRequest
Новая
       28

Gulp не компилирует ВСЕ файлы sass

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

Функция Gulp: 

function style() {
//1.where is my scss
return gulp.src('src/scss/**/*.scss') //gets all files ending with .scss in src/scss
//2. pass that file through sass compiler
.pipe(sass().on('error',sass.logError))
//3. where do I save the compiled css file
.pipe(gulp.dest('src/css'))
//4. stream change to all browsers
.pipe(browserSync.stream());
}

Структура папки:

enter image description here

Ожидаемый вывод: syles.css будут иметь стили, записанные в syles.scss и vendor.scss

Фактический вывод: syles.css будет иметь стили, записанные в syles.scss один. vendor.scss стили не добавляются в styles.css

1 Ответ

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

Ваш фактический вывод правильный. Вам нужно @use частичное в ваш styles.scss, если вы хотите, чтобы только один файл styles.css выводил содержимое vendor.scss.

Модули

Вам не нужно записывать весь свой Sass в одном файле. Вы можете разделить его, как хотите, с помощью правила @use. Это правило загружает другой файл Sass как модуль, что означает, что вы можете ссылаться на его переменные, миксины и функции в вашем файле Sass с пространством имен, основанным на имени файла. Использование файла также включает в себя CSS, который он генерирует в вашем скомпилированном выводе!

из https://sass-lang.com/guide

, поэтому в вашем styles.scss на top:

@use 'vendor;

, а затем переименуйте vendor.scss в _vendor.scss

...