• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Adding PostCSS/Autoprefixer To The Aurelia CLI

Aurelia 1 · July 14, 2016

I have been having a bit of fun using the Aurelia CLI. One of the downsides is if you want to use Autoprefixer and PostCSS with something like Stylus, Less or Sass, you can’t choose a preprocessor and use Autoprefixer.

This is easy enough to add in manually and gets you familiar with how the CLI handles task (which use Gulp).

Install development dependencies

Go into your project directory and run the following in your terminal of choice.

npm install gulp-postcss autoprefixer -D

Configuring the CLI

Still in the project directory go into aurelia_project/tasks and open up the file process-css.ts or process-css.js depending on your chosen language.

Inside this file you should see a bunch of imports and a default function called processCSS which we want to replace with the following (I am using Sass, so adjust accordingly if you’re using something else):

import * as postcss from 'gulp-postcss';
import * as autoprefixer from 'autoprefixer';

export default function processCSS() {
    let processors = [
        autoprefixer({ browsers: ['last 1 version'] })
    ];

  return gulp.src(project.cssProcessor.source)
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sass().on('error', sass.logError))
    .pipe(build.bundle());
};

I am a huge fan of using Sass with Autoprefixer as you can see. Now I don’t need to worry about vendor prefixes.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Michael Prescott
Michael Prescott
6 years ago

I had an entire stack of custom gulp tasks that worked with earlier versions of aurelia’s tasks. I knew I wanted to start using aurelia-cli, but was concerned that I’d need revise a lot of code to catch-up with their changes. You saved me a lot of time. Thank you!

0
René
René
6 years ago

I had to switch this lines to get it to work.

.pipe(sass().on(‘error’, sass.logError))
.pipe(postcss(processors))

0
Josh
Josh
6 years ago

In the latest version of Aurelia CLI (as of today):
Use
import postcss from ‘gulp-postcss’;
import autoprefixer from ‘autoprefixer’;
Instead of the above.

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz