Compile SCSS with Webpack

[olivierobert]

What happened

Replace the SCSS compilation from Jekyll with Webpack to have a modern frontend development workflow with postcss. This is a requirement to use Tailwind and to use advanced CSS features.

I also took the opportunity to upgrade all the dependencies to the latest versions 💪

TODOs:

• Add purge css to remove unused CSS (required for Tailwind)
• Add browsersync to refresh the web page automatically when changes are made

Insight

While Jekyll has a plugin for postcss, it has a major downside. It only can process one stylesheet 😓 It means that it only processes the file _sass/application.scss. All subdirectories _sass/base/, _sass/components/, etc. are not processed. Second, the plugin is only maintained by one person so updates are scarce. Overall, it's better to rely on the JS ecosystem for this.

Dependency issues:

• webpack-shell-plugin is not compatible with Webpack 5 so it has been replaced by webpack-shell-plugin-next.
• Increasing the required NPM to version 7.x.x is not possible as it breaks on Github Actions: Allow to set a custom npm version with npm_version option actions/setup-node#213.

Proof Of Work