WooCommerce w/ Grunt

sage
1

I’m attempting to add WooCommerce to my grunt tasks. I’ve copied over all the .less files to assets/less/woocommerce. Then I thought I added the task to Grunt by adding it right below ‘assets/less/bootstrap/*.less’ but it doesn’t seem to be picking up.

2

That will only add it to the watch task.

To actually compile the LESS you will need to use @import like we do for Bootstrap in app.less, or you can add the files with wildcards in the Grunt file as below; this second option will lose support for sourcemaps.

less: {
      dist: {
        files: {
          'assets/css/main.min.css': [
            'assets/less/app.less',
            'assets/less/woocommerce/*.less`
          ]
        },
3

Duh! I should have realized that. Got it working. Thanks as always!

4

Wouldn’t it make more sense to simply compile the woocommerce styles into main.css? Or disable them altogether and use bootstrap classes?

5

Disabling WooCommerce styles would still require that you edit all of the templates to take the styles of Bootstrap which would be a heck of a lot.

6

Yes. It’s quite a bit of work to do it that way.

Right now I’m seeing woo styles in the doc head but the files are empty. Wassup with that?