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.

You may encounter permission error when “composer update”. In that case, remove the related folders from the local env.

Then again composer update in the Vagrant env.

The plugins will be installed automatically on the production when you next deploy.

Set up wp-coding-standards

To use WordPress coding standard, add the following repository in the composer.json.

They will be installed in the following directories.


You need to specify the relative path in the phpcs.xml

If you are using ATOM Editor, install the following packages:

  • linter
  • linter-phpcs
  • editorconfig

To install phpcs, first set up the composer in your local env, then install phpcs.

% composer global require “squizlabs/php_codesniffer=*”

Then set up the ATOM linter-phpcs preference “Executable Path” to “/Users/USERNAME/.composer/vendor/bin/phpcs”.

If you encounter “Invalid point encountered in the attached message” linter-phpcs error, follow this comment.