Kirby Webpack : a Kirby starter-kit with modern frontend tools


Thanks for our effort.
But as I said, if I compile the same files with sass via the terminal or with codekit, the output is correct. So I don’t think that the code or order is not right, but ruther how kirby-wepack is complining it?
But maybe I’m wrong?


Yes i get that you used Codekit and the terminal (although you didnt say what you used on the terminal). What you didnt do is try Webpack on its own, or through some other method like Laravel Mix.

Kirby webpack is using webpack. I used webpack (via Laraval Mix) and it worked.

Laraval Mix (compiled correctly) and Kirby Webpack (did not compile correctly) use the same version of Node Sass (libsass 3.5.0.beta.2) to actually compile the code. I don’t think the problem is with Kirby Webpack or Webpack, rather a problem with your files.

It could be that your running it on the wrong version of Node. Did you get any warnings when you setup Kirby Webpack?

Try running this terminal:

node -v

Will give you the Node version you have installed. Kirby webpack needs at least version 6. It compiled correctly for me running on Node 8.9.1


I had Node 6.x running and updated it to the version (8.9.4). And I also updated libsass its now on version 5.6.0. But still no luck.
Then I also tried laravel mix, but also with no luck. It compiles the same way like kirby-webpack.

So it seems to be my system config. But I have no clue how to fix it. Or how to set up a proper environment for webpack.


The odd thing is I just set this up from scratch to see if i could figure out your problem, and I am getting the same result. I think the problem is Skel itself, and its unorthodox approach to class names. It also hasn’t been updated for two years, with plenty of longstanding open issues on GitHub.

I suspect it uses older style SASS that has been deprecated and now doesnt compile correctly with the current SASS compilers. CodeKit seems to work, but I dont know which version of LibSass it has built in to it. I can’t offer much more help really, other then trying to find out what version CodeKit uses, and adding that to your project.

Its something to do with Skel’s use of the escape charachter in classnames, which is technically invalid I think, and something in nodesass is stripping them out or ignoring them resulting in broken CSS.


Thanks @jimbobrjames. I really appreciate your effort.
That helps, so I think I just skip the grid from skel and use another one.


No worries. I can recommend Neat or Profound.


@antoine1000 I’m having a problem changing the Preprocessor to stylus. I’m getting the Error:

“ERROR in multi ./src/index.less webpack-hot-middleware/client?reload=true
Module not found: Error: Can’t resolve ‘/Users/Callum/projets/site/src/index.less’ in ‘/Users/Callum/projects/site’
@ multi ./src/index.less webpack-hot-middleware/client?reload=true”

What could be the problem in this instance?



You need to change manually the extension of your index file, in your src folder. In this case, index.less should be index.styl. If you work with multiples css files, be careful to rename every files with .styl extension to avoid the error.


Thanks for the swift reply. I have done this already and the problem still persists, do you have any other ideas on what the problem could be?



In your main.config.js file (you can find it at the root of the project), be sure that your css entry file has the .styl extension, and set your preprocessor to stylus. It should look like this :

const entries = {
  'src/index.js': 'www/assets/bundle.js',
  'src/index.styl': 'www/assets/bundle.css'


const css = {
  // Preprocessor used to bundle your CSS
  // This can be 'sass', 'less', 'stylus' or 'manual'.
  // Be sure to have your entries and sourcefiles named with the good file ext
  // —> .scss for sass / .less for less / .styl for stylus
  // Set to 'manual' to handle css yourself (using css-next for instance)
  preprocessor: 'stylus'


Ah that was the problem. Thank you very much for your help and sharing the projects


I have a problem using an external JS file with jQuery and the Kirby Webpack Starterkit. I receive the error “jQuery is not defined”.

Perhaps jQuery is not a global variable?

import $ from 'jquery';
window.$ = window.jQuery = jQuery;

const smoothState = require('./smoothstate.min.js');

Do have an opinion on what the best way to fix this error would be with the Kirby Webpack Starterkit?



I think it is a Webpack issue, not a Kirby Webpack related issue. Maybe try to install jQuery as a plugin, in the file (you can find it at the root of Kirby Webpack). Try something like this :

// inside
plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'



I had similar problem with Webpack (Laraval mix, not Kirby Webpack, but the same should work)

Try this in your javascript file (replace the three lines you posted above with these two):

window.$ = window.jQuery = require('jquery');

I found using require alone does the trick (don’t ask me what the difference is because I don’t know :slight_smile: ).

The problem could be the smoothstate file itself, if its not coded for use with bundlers like webpack.


I just cloned a new project and went through the usual set up. ButI’m having trouble logging into the panel. Every time I type in http://localhost:8080/panel it redirects to the root. Do you have any ideas on how I can troubleshoot this problem?


Hi, there was a bug with kirby-webpack and the new version of kirby (2.5.9)

It’s now fixed!


I know I’m raising a somewhat old topic from the dead, but I’m having an issue I can’t seem to figure out.

When I run npm run start, the server starts and everything gets compiled correctly—I can even see in my /www/assets/builds/ directory that my Sass is being compiled correctly into CSS.

The issue, though, is that in-browser, that CSS (which appears correct in my IDE and in my file structure) looks more like

/******/ (function(modules) { // webpackBootstrap
/******/ 	function hotDisposeChunk(chunkId) {
/******/ 		delete installedChunks[chunkId];
/******/ 	}
/******/ 	var parentHotUpdateCallback = window["webpackHotUpdate"];
/******/ 	window["webpackHotUpdate"] = // eslint-disable-next-line no-unused-vars
/******/ 	function webpackHotUpdateCallback(chunkId, moreModules) {
/******/ 		hotAddUpdateChunk(chunkId, moreModules);
/******/ 		if (parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
/******/ 	} ;


And so on.

What am I doing wrong that the CSS is not being rendered correctly in-browser? Please note that I am not fluent with Webpack.


Hi, sorry for the late reply. I don’t come here often - you can post an issue on the repo if you have any question related to kirby webpack.

In development, the css comes “wrapped” into a javascript script to enable live reloading of your style. You have to use the special kirby-webpack liveCSS() function instead of the kirby css() built-in one to make it work.



Hey, thanks for the reply!

I figured out the issue—my dumb self had, at some point, overwritten the /plugins/ folder, wiping out the kirby-webpack plugin. The liveCSS() method was giving me an error, so I had defaulted back to css() instead.

Thanks so much for taking the time to respond, though! I genuinely appreciate it.