Добрый день, коллеги! Использую для сборки стилей gulp + sass, возник вопрос следующего характера: Обычно при сборке стилей, я использую отдельный файл, в котором подключаю все необходимые шрифты, указываю переменные цветов сайта, общие миксины и прочее, в общем все, что повторяется в пределах одного сайта (системный файл).
Далее, допустим, мне нужно использовать переменные из этого файла в стилях шапки (header), основных стилях (main) и в стилях подвала (footer). Соответственно, чтобы их использовать, я подключаю системный файл с помощью import в header.sass, main.sass, footer.sass. Все окей, все работает.
Проблема возникает, когда я подключаю уже собранные css файлы к сайту. В итоге код с цветами из системного файла дублируется в каждом файле, в котором я его подключал (логично), а это не совсем то, что я хотел бы получить. Мне необходима возможность использовать все переменные из системного файла, при этом, чтобы их код, допустим, был только в файле header (т.к. он подключается на всех страницах сайта) и не дублировался больше нигде.
Проблема именно в том, что если я не импортирую системный файл везде, где использую его переменные, то gulp начинает ругаться, что переменных не существует, а если импортирую в каждый файл - код системного файла потом дублируется по 3-5 раз на странице.
Вопрос: Как мне правильно подключать системный файл с константами, цветами и миксинами так, чтобы его код был доступен в header.sass, main.sass и footer.sass, но при сборке не дублировался в header.css, main.css и footer.css, а хранился только в одном файлу, допустим header.css.
Надеюсь, не сильно запутанно объяснил( Буду благодарен за любую помощь и подсказки в нужном направлении.
Код Gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
imagemin = require('gulp-imagemin'),
jsmin = require('gulp-uglify'),
prefixer = require('gulp-autoprefixer'),
cssGlobbing = require('gulp-css-globbing');
gulp.task('sass', function () {
return gulp.src(['./local/blocks/**/*.sass', './local/blocks/**/*.scss'])
.pipe(sass({outputStyle: "expanded"}).on("error", sass.logError))
.pipe(cssGlobbing())
.pipe(gulp.dest('./local/blocks/'));
});
gulp.task('set-prefix', function(){
gulp.src('./local/blocks/**/*css')
.pipe(prefixer({
browsers: ['last 2 versions'],
}))
.pipe(cssGlobbing())
.pipe(gulp.dest('./local/blocks'))
});
gulp.task('imagemin', function(){
gulp.src('./local/img/*')
.pipe(imagemin({
progressive: true,
optimizationLevel: 5,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(cssGlobbing())
.pipe(gulp.dest('./local/img'))
});
gulp.task('watch', ['sass', 'set-prefix'], function(){
gulp.watch(['./local/blocks/**/*.sass', './local/blocks/**/*.scss'], ['sass']);
});
Простой
