Adding Sass & Autoprefixer Into Your Aurelia Applications

Plain old CSS is boring. If you are building your applications off of the Aurelia Skeleton Navigation then it ships with support for working with regular CSS.

Adding in support for working with Sass in your Aurelia applications is as easy as whistling dixie. We are also going to be adding in support for Autoprefixer as well so we can automatically add in browser prefixes for all of our CSS without worrying about browsers like IE10 and what they can support.

We will be adding all of this to the previous Aurelia Skeleton Navigation project, so make sure you have all of the existing Gulp and build task logic in there we can build off.

Install our Npm dependencies:

Below we are installing the Sass plugin for Gulp as well as the Autoprefixer plugin for adding in our browser CSS prefixes.

npm install gulp-sass -D
npm install gulp-autoprefixer -D

Add our paths:

Open up the file build/paths.js which contains all of the various paths used by the build tooling.

Inside of module.exports = {} add the following anywhere you want: style: ['styles/**/*.scss', 'styles/**/*.css'] and remove the existing following lines from the paths file:

css: appRoot + '**/*.css',
style: 'styles/**/*.css',

Add a Sass task:

Now we have adjusted our style path and told it about not only regular CSS and Sass styles. There is already an existing task which we will keep for the moment and delete after creating the Sass task.

Adjust the following Autoprefixer settings to accommodate the browsers that you want to support. The following supports browsers IE9 and up, plus a few others as well.

gulp.task('build-styles', function() {
    return gulp.src(paths.style)
    .pipe(plumber())
        .pipe(sourcemaps.init())
            .pipe(sass())
            .pipe(autoprefixer({
                browsers: [
                    'Android >= 2.3',
                    'BlackBerry >= 7',
                    'Chrome >= 9',
                    'Firefox >= 4',
                    'Explorer >= 9',
                    'iOS >= 5',
                    'Opera >= 11',
                    'Safari >= 5',
                    'ChromeAndroid >= 9',
                    'FirefoxAndroid >= 4',
                    'ExplorerMobile >= 9'
                ]
            }))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(paths.output))
            .pipe(browserSync.stream());
});

Make sure now that you have created this new task to delete the old CSS task called build-css as we have essentially enhanced the previous method with this new one.

Now let’s plug it in…

Down the bottom of the build.js file there is a task called build which is the main task that calls the other tasks we have created. In the array you will see the task name build-css replace this with build-styles to tell our workflow about our new task.

Finally.

We just need to update the watch logic located in build/tasks/watch.js under the mega task called watch in which our files are watched and then tasks are run.

Replace the following:

gulp.watch(paths.style, function() {
    return gulp.src(paths.style)
      .pipe(browserSync.stream());
  }).on('change', reportChange);

With this:

gulp.watch(paths.style, browserSync.reload).on('change', reportChange);

Now you should hopefully have Sass working in your Aurelia application complete with Autoprefixer. Provided I made no errors in this post and remembered all of the steps.

As always, let me know if you have any issues or questions.