Add support for hugo resource pipelines and color modifications through site config

[mpourismaiel]

What this PR does / why we need it:
Add support for hugo resource pipelines and color modifications through site config

Which issue this PR fixes:
fixes #266
fixes #270
fixes #272

Special notes for your reviewer:

Release note:

- Hugo resource pipelines now builds sass files instead of Webpack
- Theme colors are now customizable through `config.toml`

[stp-ip]

Not perfectly sure why this would fail on netlify yet. Let's fix the conflicts and move hugo to "v0.46" and I'll take a nother closer look, why it would fail.

[mpourismaiel]

The conflicting files here is making me panic.

[stp-ip]

Haha just a few changes ^^

[mpourismaiel]

It seems like we need to use the extended version of hugo which has support for sass/scss.

[stp-ip]

Any docs on the extended version? Happy to work on that tomorrow, but I assume it could be done via the netlify.toml config, but can also jump into netlify tomorrow, if necessary.

[mpourismaiel]

There is an issue tracking this on netlify. I'm not sure we can do anything for this right now except pushing the built website which is just horrible.

[mpourismaiel]

@stp-ip This branch was stale for so long, it was more than 150 commits behind. I added a few more commits fixing a few other issues. Also removed resources from the gitignore (yielded to netlify) and thanks to hugo, the directory cleans after itself so several builds doesn't generate a several files, just two for each file (the build and the map). Right now Netlify can do with this and I think it's not an awful workaround. This was done since Netlify doesn't have a roadmap for Hugo extended version.

Let me know what you think.

[stp-ip]

Or we could try the workaround:
netlify/build-image#183 (comment)

[mpourismaiel]

I saw that one last night but thought it was a scary approach. It's running an script on an image we don't have much info on. It's temporary but still. What do you think?

[stp-ip]

Happy to just go with this PR. Will review in a bit.

[hawkeye116477]

Another workaround is to use gulp-sass.

gulpfile.js

var gulp = require('gulp');
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");

// Compile SCSS files to CSS
gulp.task("sass", function () {
  return gulp.src("assets/sass/*.scss")
      .pipe(sass({
          outputStyle : "compressed"
      }))
      .pipe(autoprefixer({
          browsers : ["last 20 versions"]
      }))
      .pipe(gulp.dest("assets/css"));
});

package.json

{ 
  "devDependencies": { 
    "gulp": "4.0.0", 
    "gulp-sass": "latest", 
    "gulp-autoprefixer": "latest" 
  } 

and replace build command with something like this command = "gulp sass && hugo --minify" 😄.

[mpourismaiel]

@hawkeye116477 Hey. Thanks a lot for the solution. But one of the tasks requires go template inside the SCSS files and that's only achievable using the pipelines. We use Webpack for asset transpilation/compilation/bundling but asset pipelines offers easier usability for the development side.