Including WooCommerce SCSS into Sage SCSS pipeline? Bourbon import problem

sage
1

Hey guys, I’ve asked about this before and almost got it working. I’ve configured Gulp to include a scss file when processing main.scss by adding a vendor key to the main.css key in manifest.json like this:

"main.css": {
  "files": [
    "styles/main.scss"
  ],
  "vendor": [
    "../../plugins/woocommerce/assets/css/woocommerce.scss"
  ],
  "main": true
},

That managed to work and it is now trying to parse the included woocommerce.scss file when I run the gulp command. However, it’s throwing an error during processing which I assume is because WooCommerce’s styles weren’t meant to be compiled on the fly:

[14:32:18] Finished 'default' after 440 ms
[14:32:18] Finished 'wiredep' after 477 ms
[14:32:18] Starting 'styles'...
..\..\plugins\woocommerce\assets\css\woocommerce.scss
Error: File to import not found or unreadable: bourbon
       Parent style sheet: stdin
        on line 10 of stdin
>> @import "bourbon";
   ^

[14:32:18] Finished 'styles' after 28 ms

So it can’t find Bourbon, most likely because there is no bourbon in WooCommerce’s css directory. I’ve kind of gotten this to work before by simply copying all of WC’s scss files into my theme’s assets directory (within a woocommerce subdirectory), but I figured I would try making it work with manifest.json, as that seems like it will be more robust with regard to future updates (I have WooCommerce installed as a WPackagist Composer dependency).

When I did it that way and copied the scss files, I was able to avoid the Bourbon issues by simply installing Bourbon as a Bower package, making it available within main.scss where I had added @import statements for the various WooCommerce files.

However, now that I’m using manifest.json to include the WooCommerce scss files, bourbon doesn’t seem to be available during processing. I’m not sure how exactly Gulp processes the dependencies, but it would appear that it’s parsing the vendor assets before the files. Even if this weren’t the case, I doubt bourbon would work between what seems to be two separate scss processes (since it’s being imported within main.scss and presumably the vendor assets aren’t being processed within main.scss).

So, how can I make it so that Bourbon is available when Gulp processes the manifest.json → main.css → vendor assets? What I’d ideally like is for it to just work, for Bourbon to be available when woocommerce.scss tries to @import it, and for it to process all of the various WooCommerce scss files just like it would if you were to run the “official” WooCommerce build process (which I believe is a Gruntfile, though I can’t seem to find this file in my woocommerce plugin directory as indicated in the WC docs).

Damn, I feel like I’ve written a novel about this by now, so I’ll attempt a TL;DR:

Trying to incorporate WooCommerce styles in to Sage’s asset pipeline to combine everything into just the one main.scss dist file. Am able to do so by copy/pasting WC’s scss files into Sage’s assets/styles, but this method is not “update-safe”.

In order to make integration “update-safe”, I am now trying to include WC’s styles via manifest.json instead of through main.scss. I am able to include the files to be processed in the asset pipeline, but I am encountering an error caused by WC’s dependency for Bourbon which is included via an @import statement in many of WC’s scss files.

How can I make it so that the @import "bourbon"; statement within woocommerce.scss does not fail during parsing? Or to put it another way, how can I make Bourbon available to woocommerce.scss during parsing?

2

I’m curious, if you’re going that route, why not just import the compiled CSS? I may be missing something (highly likely) but it seems like you’re going through a lot of trouble just to have Sage compile the Woo stuff and give you the compiled styles, when you could just import the compiled styles and call it a day.

Make sense? What am I missing?

FWIW - I just had to bolt Woo on to the tail end of a project, I disabled all of the Woo styles and rolled with my own. I think that’s probably the easiest way to go when adding it to a custom project.

1 Like
3

To include the woocommerce scss styles in your project you have to install node-bourbon then use it in your gulp/grunt/webpack file with the sass loader.

Install npm-bourbon:

npm install --save-dev node-bourbon

I use Sage 9 now so here is my example below. Add the following changes to your assets/build/webpack.config.js

Include bourbon and path:

const bourbon = require('node-bourbon').includePaths;
const path = require('path');

change the sass loader to:

``sass?${sourceMapQueryStr}&includePaths[]=${bourbon},

change the ttf|eot|woff2 … file loader to:

test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg)$/,
include: [
  path.resolve(__dirname, '../../node_modules'),
  path.resolve(__dirname, '../../bower_components'),
  path.resolve(__dirname, '../../../../plugins/woocommerce/assets'),
],

Now you can load the woocommerce.scss in your main.scss file:

@import "../../../../plugins/woocommerce/assets/css/woocommerce";

1 Like