Posted on

How to extract and compile Sass/CSS with Webpack 2

Sass is now an indispensable tool for web designing, and it is true for creating a custom theme. Webpack also helps to make the build process even smoother. There was a slight change on the integration with the latest Webpack 2.x, so here is how.

This example assumes that you are creating a new WordPress child theme with Bedrock, and have already installed node.js and npm.

First, install Webpack module bundler in the theme directory.

add these lines

Install webpack and sass modules by npm.

Edit package.json to add command to build sass.

Then create webpack.config.js to specify the Sass compile task. The syntax has been changed from Webpack version 1.x, and this is an example for webpack 2.3.3.

and create the styleshees directory.

If you are creating a new child theme of Storefront theme, the CSS would be something like this.

Save the file and run the build. It will create a new style.css in the theme root directory.

To auto reload when you make any change on the file: