deimon260993
@deimon260993
Web-программист

Как правильно собирать SASS файлы?

Добрый день, коллеги! Использую для сборки стилей 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']);
});
  • Вопрос задан
  • 756 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Не знаю как в gulp, думаю также можно. В webpack я делаю главный стиль main.scss, в котором сначала импортирую файл с переменными, миксинами, фреймворки и потом уже импортирую каждый файл отдельно.
Указывать вручную удобнее, т.к. точно знаешь, какие и в какой последовательности подключены файлы. Да и к тому же, для всех файлов доступны переменные и миксины (а также переменные и миксины фреймворка).
Все равно в итоге все должно быть в одном файле css, а для удобной работы через devtols нужно использовать source map
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы