CSS, PostCSS and Sass
PostCSS
By default GoPablo supports PostCSS, a similar preprocessor to Sass, Less and others but with more functionality. On top of that PostCSS is 3x faster than Sass and 4x faster than Less. Features come in the shape of PostCSS plugins. Think of these like using Lego, where each piece is a different feature that can transform your CSS in some way. PostCSS lets you stick these pieces together so that you can build up your own feature set, adding and removing plugins as and when you need them. CSSNext is installed by default. Read more about PostCSS here.
PostCSS Plugins
GoPablo has two different sets of PostCSS plugins – one for the development environment (pluginsListDev) and one for the production task (pluginsListProd).
const pluginsListDev = [
partialimport,
postcssPresetEnv({
stage: 0,
features: {
'nesting-rules': true,
'color-function': true,
'custom-media-queries': true,
},
}),
postCSSMixins,
autoprefixer,
];
const pluginsListProd = [
partialimport,
postcssPresetEnv({
stage: 0,
features: {
'nesting-rules': true,
'color-function': true,
'custom-media-queries': true,
},
}),
postCSSMixins,
require("cssnano")(),
];Writing CSS
The starting point for CSS is the file:
src/assets/css/styles.cssThe template definitions are located here too. It is also where all other imports are included in the stylesheets.
Sass
GoPablo is super flexible. You can install Sass and use it as the main CSS preprocessor:
npm install sass gulp-sassInclude Sass in gulpfile.js:
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);Change the gulp tasks stylesDev to:
function stylesDev() {
return src('./src/assets/css/styles.scss')
.pipe(sourcemaps.init())
.pipe(sass({includePaths: 'node_modules'}).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(dest('./build/assets/css'))
.pipe(browserSync.stream({ match: '**/*.css' }));
}Also the watch task has to be changed in order to watch for .scss filetypes:
watch('./src/assets/css/**/*.scss', stylesDev);Change the gulp tasks stylesProd to:
function stylesProd() {
return src('./src/assets/css/styles.scss')
.pipe(sass({includePaths: 'node_modules'}).on('error', sass.logError))
.pipe(dest('./dist/assets/css'));
}