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.
1 2 3 |
% cd BEDROCK_DIR/site/web/app/themes/YOUR_THEME_NAME % touch .gitignore |
add these lines
1 2 |
node_modules/ npm-debug.log |
Install webpack and sass modules by npm.
1 2 3 4 5 6 7 8 9 10 11 12 |
% npm init -y % npm install --save-dev webpack % node node_modules/.bin/webpack --version 2.3.3 % npm install node-sass style-loader css-loader sass-loader extract-text-webpack-plugin --save-dev % npm install susy % npm install extract-text-webpack-plugin |
Edit package.json to add command to build sass.
1 2 3 4 5 |
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch", "build": "webpack" }, |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const path = require('path') const ExtractTextPlugin = require('extract-text-webpack-plugin') module.exports = [{ entry: { style: './src/stylesheets/main.scss' }, output: { path: path.join(__dirname, ''), filename: '[name].css' }, module: { loaders: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }) } ] }, plugins: [ new ExtractTextPlugin('[name].css') ] }] |
and create the styleshees directory.
1 2 3 4 5 6 7 8 9 |
% mkdir src % cd src % mkdir stylesheets % cd stylesheets % touch main.scss |
If you are creating a new child theme of Storefront theme, the CSS would be something like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* Theme Name: YOUR THEME NAME, Storefront Child Theme Theme URI: Author: Jun Kaneko Author URI: Template: storefront Description: This is a custome child theme for WooThemes StoreFront theme Version: 0.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: storefront Tags: black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc. FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL Images License: GNU General Public License v2 or later */ @import "~susy/sass/susy"; body { @include container(80em); } |
Save the file and run the build. It will create a new style.css in the theme root directory.
1 2 3 |
% cd BEDROCK_DIR/site/web/app/themes/YOUR_THEME_NAME % npm run build |
To auto reload when you make any change on the file:
1 |
% npm run watch |