Adapting Webpack for Sage 8.4

sage
, ,
1

Wondering if anyone could point me in the right direction for adapting the Webpack build for Sage 8.4.

There has been an issue with the souce mapping and sass. The earlier solution of rolling back to glup-sass 2.3.2 no longer works, because there is now a bug installing that.

Any help much appreciated.

2

Is there a particular reason for wanting to do this rather than just using Sage 9?

3

I already have a theme developed with 8.4.2. I had to reinstall the node modules and there were some issues with it.

4

I see, makes sense :slight_smile:

Iā€™ve had luck simply copying across the latest gulpfile.js and amending the existing package.json with the more recent dependencies. This allowed me to update an old preject very recently.

5

Even the 8.5.3 package.json dependencies is giving me the ā€œnode-sass@3.13.1ā€ error. I have a work around, but iā€™m looking for a more stable future proof solution.

6

Another option is to use Laravel Mix which is a stand-alone wrapper for Webpack. It has a fluent API for defining basic webpack build steps for 80% of your use cases.

There is a great example of Mix in a project on GitHub, while geared at Sage9, has the following webpack.mix.js file:

mix.setPublicPath('dist')
.js('resources/assets/js/app.js', 'js/')
.extract([
'babel-polyfill',
'vue'
])
.sass('resources/assets/sass/app.sass', 'css/')
.options({
processCssUrls: false
})
.version()

You can mix, compile, bundle, post-process, browser-sync, proxy, and more from one file. Whatever your gulp flow was in 8.4, you can easily adapt to Laravel Mix.

This project on GitHub uses Laravel Mix, VueJS, with an option for WPGlide.

7

I donā€™t recommend trying to do a major change to your build process if youā€™re already working on a Sage site before version 9.

If you are having issues with anything to do with Node, those should all be solvable a lot quicker than trying to replace gulp + bower + asset-builder with something else.

There is no reason why you shouldnā€™t be able to use any version of Sage (including versions of Roots with Grunt) years down the line.

Without more information on this itā€™s hard to help you.

1 Like
8

The issue is that Node 8 is not compatible with gulp-sass 2 and its dependency node-sass 3.13.1.

If I upgrade to gulp-sass 3 it brakes the source-map. So I had to comment out

  .pipe(function() {
  return gulpif(enabled.maps, sourcemaps.init());
})

in order for it to work.

9

Iā€™ve installed Node Version Manager for Windows and rolled back to Node 7.10.1 and seem to be ok for now.

But installing the the Sage 8.5 or Sage 8.4 Node Modules on Node 8 on Windows seems problematic.

10

I had the same issue. Works again with Node 7.10.1 because it uses npm 4 and not 5. In npm 5 the old node-sass 3.13.1 canā€˜t be found.

11

@Christopher_Murphy did you have any luck adapting webpack for Sage 8.*? Iā€™ve managed to drop in v9ā€™s build components and it works beautifullyā€¦the only thing left is to figure out how to enqueue css and js with the handy versioned filenames created with yarn build:productionā€¦I canā€™t figure out how itā€™s done.

12

Not yet, havenā€™t had the time. Iā€™ve just disabled source maps and moved on.

13

@canarystudio did you get the hot middleware to work on the sass files? I get a live reload iso an injection, while it does work with js

14

I really like Sage Starter Theme and Webpack with HMR module to speed up my working, I combine them and proposal a boilerplate at here https://github.com/lbngoc/sage-8-webpack