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:

Posted on

Install Woocommerce plugin and theme with Composer from the vendors’ repositories

When managing WordPress and the plugins with Composer via Trellis, I sometimes could not find a plugin or a theme that are not available from the wpackagist repository. This is how to install plugins and themes directly from the vendors’ github repo or download site.

Open composer.json and add repositories. For example to add Woocommerce plugin and the Storefront theme, specify the zip download URL with the package name. Each custom package requires an unique package name. I specified woocommerce-theme for the Storefront as woocommerce is already used by the plugin.

and requires them also in the same composer.json.

To install the plugin and theme on the development environment, ssh to Vagrant and run composer update.

These plugin will be installed automatically on the production when you next deploy.