Parcel.js and PostCSS Rule Nesting

I’m trying our Parcel.js for one of my more recent endeavours and I must say I’m quite liking it so far. The zero-config approach doesn’t leave you with a lot of control, but at least you don’t have to adopt a boiler plate that you only use half the features of or write a 200 line webpack config by hand first.

One thing I really, really dearly missed when I just started out building a recent project with PostCSS is nesting rules. Usually I use SASS/SCSS for most of my CSS needs.

Nesting rules in SCSS looks like the following:

Continue reading “Parcel.js and PostCSS Rule Nesting”

A Comical Guide to Webpack, Vue.js 2, Gulp and WordPress [Tutorial]

Building WordPress themes and plugins is a big market and it gets a lot of people into web development, so I named this post like I did, but it really works for most CMS, no matter if you want to write a theme for WordPress, Drupal, GHOST, Magento or what ever else is out there. I’m going to show a simple webpack config that helps you transpile your JavaScript and develop your themes as usual.

TLDR; Here’s how to do stuff and me rambling in between. Use one of these links to get to your preferred headline:

Continue reading “A Comical Guide to Webpack, Vue.js 2, Gulp and WordPress [Tutorial]”

Webpack Sass / Scss compiling to separate file

Webpack is an amazing tool for transpiling and bundling JavaScript, but it can also take care of compiling Sass or Scss to static files.

get the code on github

I came across this issue while developing a prototype and not a single page app, that I needed to have a .scss file include some other files and output a .css file. I didn’t need inlined and scoped CSS like one would probably do with a single page app.

Continue reading “Webpack Sass / Scss compiling to separate file”