I am building my styles from SCSS with a single entry point main.scss. SCSS partials are included via @import. I need to apply some postcss transformations to some partials after the got compiled to css. As I do not know exactly in which order the transformations in fact happen during the sass compilation process I am not sure if it is even possible. I am not yet skillful enough to debug it myself)) Please give me an advice how to solve this.
Below is my .gulpfile so you can understand what I am after more clear:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var prefixer = require('postcss-prefixer');
var sass = require('gulp-sass');
var filter = require('gulp-filter');
gulp.task('prefix', function () {
var plugins = [
prefixer({
prefix: 'PREFIXXX-',
ignore: []
})
];
var f = filter('*.bootstrap.scss', {restore: true});
// return gulp.src('./static_src/styles/utilities/**')
return gulp.src('static_src/styles/main.scss', )
.pipe(sass().on('error', sass.logError))
.pipe(f)
.pipe(postcss(plugins))
.pipe(f.restore)
.pipe(gulp.dest('./dest'));
});
gulp.task('default', ['prefix']);
Good day!
I am building my styles from SCSS with a single entry point
main.scss
. SCSS partials are included via@import
. I need to apply some postcss transformations to some partials after the got compiled to css. As I do not know exactly in which order the transformations in fact happen during the sass compilation process I am not sure if it is even possible. I am not yet skillful enough to debug it myself)) Please give me an advice how to solve this.Below is my
.gulpfile
so you can understand what I am after more clear: