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.
@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?
Hi,
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'
}
/**
* CSS CONFIGURATION
*/
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'
}
1 Like
Ah that was the problem. Thank you very much for your help and sharing the projects
1 Like
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?
Hi,
I think it is a Webpack issue, not a Kirby Webpack related issue. Maybe try to install jQuery as a plugin, in the webpack.config.dev.js file (you can find it at the root of Kirby Webpack). Try something like this :
// inside webpack.config.dev.js
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
1 Like
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');
require('./smoothstate.min.js');
I found using require alone does the trick (donāt ask me what the difference is because I donāt know 
).
The problem could be the smoothstate file itself, if its not coded for use with bundlers like webpack.
1 Like
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!
1 Like
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.
See https://github.com/brocessing/kirby-webpack#css-livereload
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.
We made some updates to Kirby Webpack to be compatible with Kirby 3.
It is mostly dependencies updates, switch from LESS to SASS preprocessor by default, site blueprints updates and some fixes for BrowserSync (to prevent an infinite loop issue in the panel).
We need to update for more modern tools (like replace Webpack with Viteā¦etc) but the current update should do the trick for most users.
PS: could be nice to tag this post āKirby 3ā now!
1 Like