Sass is a common and powerful css preprocessor that helps keep styles and views clean and readable. The Aurelia skeleton navigation project doesn’t come with Sass support out of the box. Fortunately, adding Sass support to the Aurelia development workflow is quick and easy. Let’s take a look at the high level steps we will need to go through:
- Install the Sass compiler
- Add Sass to our project
- Configure our paths
- Add the build task
Installing the Sass Compiler
Since the skeleton navigation project comes with a pretty elaborate gulpfile, we install gulp-sass, a sass compiler that hooks into gulp. Let’s add the package to our package.json and run npm install to install the package.
package.json
{
"name": "aurelia-skeleton-navigation",
"version": "0.12.0",
...
"devDependencies": {
...
"gulp-sass": "^1.3.3",
...
}
...
}
Adding Sass to our Project
The skeleton navigation project comes equipped with a css file at styles/styles.css. Let’s rename this file to styles.sass and update the syntax to match sass syntax.
styles.sass
body
margin: 0
.splash
text-align: center
margin: 10% 0 0 0
box-sizing: border-box
.message
font-size: 72px
line-height: 72px
text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px
text-transform: uppercase
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
.fa-spinner
text-align: center
display: inline-block
font-size: 72px
margin-top: 50px
.page-host
position: absolute
left: 0
right: 0
top: 50px
bottom: 0
overflow-x: hidden
overflow-y: auto
section
margin: 0 20px
.navbar-nav li.loader
margin: 12px 24px 0 6px
.pictureDetail
max-width: 425px
Configuring our paths
Now, since the end goal is to compile the .sass file and output it as .css, we need to tell gulp where to find the .sass file and we need to instruct our index.html to read the new .css. The skeleton navigation project is already configured to output all compiled files to the /dist folder and we’re going to continue using that convention. We can instruct gulp where to find the new .sass file by modifying the build/paths.js file.
build/paths.js
module.exports = {
...
style: 'styles/**/*.sass',
output: 'dist/',
...
};
index.html
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="dist/styles.css">
...
</head>
<body aurelia-app>
...
</body>
</html>
Adding the build task
Finally, we add a new build-css task to gulp. Since the task builds css, we will include it with our other build tasks in the build/tasks/build.js file. We will also make sure that the watch task in the build/tasks.watch.js knows about our new build-css task.
build/tasks/build.js
...
// First, we need to import gulp-sass which we installed in step 1.
var sass = require('gulp-sass');
...
// Next, we add a new task for building css.
gulp.task('build-css', function() {
// We instruct gulp to pull the source from the path we specified in step 3.
return gulp.src(paths.style)
// The plumber step will ensure that if we write syntactically invalid
// sass, even though the step won't run, the gulp task won't exit. This
// is helpful because it allows us to fix our syntax without having to
// restart the gulp watch task.
.pipe(plumber())
// The changed step will analyze which files have changed and require
// rebuilding.
.pipe(changed(paths.output, {extension: '.css'}))
// The sourcemaps step will automatically generate sourcemaps.
.pipe(sourcemaps.init())
// The sass step will compile the sass. We need to specify that we are
// using the indented syntax. This is not necessary when using scss.
.pipe(sass({indentedSyntax: true}))
// And our last steps write the output and sourcemaps to the build
// destination. Recall from step 3 that this is dist/.
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.output));
});
gulp.task('build', function(callback) {
return runSequence(
'clean',
// Finally, we append our new build-css task to the general build task.
// This will link build-css into the general build task which is used
// in the gulp watch task.
['build-system', 'build-html', 'build-css'],
callback
);
});
build/tasks/watch.js
gulp.task('watch', ['serve'], function() {
...
gulp.watch(paths.style, ['build-css', browserSync.reload).on('change', reportChange);
});
Notes
This general process should work for other css preprocessors, including scss and less. In fact, the gulp-sass library will also compile .scss files. Make sure that you update your extensions in all of the steps above from .sass to your source of choice. Additionally, if you are using scss, you do not need the {indentedSyntax: true} argument, and can simply write .pipe(sass()).
