Блог

У меня есть папка со всеми моими файлами .scss, которые я хочу скомпилировать в файлы .css с помощью gulp. Мой gulpfile.js выглядит примерно так:

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

gulp.task('sass',
            function (){
              return gulp.src('css/modules/*.scss')
              .pipe(sass())
              .pipe(gulp.dest('css'))
            }
);
  

Когда я запускаю команду gulp sass, я получаю сообщение об ошибке, что переменная ($med-green) не определена в blocks.scss. Он определен в base.scss, который компилируется первым, потому что он компилируется в алфавитном порядке (и в итоге я получаю файл base.css). Файл main.scss находится в каталоге css, а все остальные файлы находятся в каталоге css / modules, поэтому я знаю, что пути указаны правильно. Как мне сделать так, чтобы переменные были видны всем файлам .scss? Чего мне не хватает?

У меня также есть основной файл.scss, который импортирует все мои файлы .scss. Если бы я мог использовать это для компиляции их в файл 1 .css (что является конечной целью), тогда это было бы здорово. Когда я пытаюсь это сделать, я получаю сообщение об ошибке «Ошибка: файл не найден с единственным глобусом». Файл main.scss выглядит следующим образом, где modules — это подпапка css, в которой находится мой файл main.scss.

 @import "./modules/_reset.scss";
@import "./modules/_base.scss";
@import "./modules/_header.scss";
@import "./modules/_footer.scss";
@import "./modules/_blocks.scss";
@import "./modules/_interviews.scss";
@import "./modules/_search.scss";
  

в вашем случае нужно сказать две вещи >>>

во-первых: чтобы решить вашу проблему, вам нужно скомпилировать только один файл (main.scss), который уже импортирует все остальные файлы scss

второе: файлы scss, начинающиеся с ( _ ), игнорируются при компиляции в gulp-sass, это все равно, что сообщить компилятору gulp-sass, что эти файлы предназначены только для импорта.

Попробуйте с этим:

 return gulp.src('css/main.scss')
  

в вашей sass задаче. Вам не нужны отдельные файлы css для каждого из ваших modules/*.scss файлов, в этом суть частичных и импортируемых файлов — вам просто нужен тот, main.scss , который импортирует их все. По отдельности один файл не будет видеть переменные другого, потому что каждый из них не импортирует все остальные.

Вы хотите только main.css в конце включить в свой HTML-файл.