@jeffbyrnes: https://github.com/roots/sage/pull/2607/commits/4e0996b7a396f82c3539fb550c2c41dc8474e32f
1 Like
Then there are some devs that have familiarized with Sage 9 and are still learning Sage 10 (notably the webpack and acorn part), hence they will still start new theme projects with Sage 9.
Relatively new to Sage here. Something you missed, a big reason I’m still using 9 is that there is no official
docs/guide for 10 yet.
5 Likes
There seems to be a related issue with Sage 10 when Tailwind is used.
Could it be caused by Tailwind/PostCSS, too, in Sage 9?
Hi,
I’m not using any of those tools, as far as I know. I just got a fresh Sage 9.x installation from
composer create-project roots/sage your-theme-name dev-webpack5 --repository=’{“type”:“vcs”,“url”:“https://github.com/strarsis/sage”}’
G.
A solution was found in the Sage 10 discussion, it involves using a special Tailwind library:
Maybe this also helps with your issue?
Hello,
I’m trying out the Webpack 5 Boostrap branch (https://github.com/strarsis/sage/tree/webpack5-bootstrap5) and it works once I add “@popperjs/core”: “^2.9.1”, to dependencies.
However the watch compile time is 4 seconds. That’s without any added scss. It’s just the base Boostrap that’s installed.
That seems quite slow?
What OS are you using? WSL 2 on Windows?
Are you using a recent node LTS?
Slow build times were reported for Tailwind, but you aren’t having any Tailwind dependencies, right?
Hi Strarsis,
Thanks for replying.
I’m using:
- OS X 10.13.6
- node v12.18.4
- laravel valet for my dev environment
I don’t have any tailwind dependencies. Dependencies are:
“dependencies”: {
“@popperjs/core”: “^2.9.1”,
“bootstrap”: “^5.0.0-beta2”,
“buble”: “^0.20.0”,
“jquery”: “^3.3.1”
}
I tried Bootstrap 4 and removed buble. Now my yarn watch compile time ranges from 1.5 to 3 seconds. What sort of compile times are you getting?
Dependencies are:
“dependencies”: {
“bootstrap”: “^4.6.0”,
“jquery”: “^3.3.1”,
“popper.js”: “^1.16.1”
}
Buble adds ES5 support for IE11, is that correct?
Yes, it is also easily possible to replace Bubel with Babel instead.
Bubel is meant as a fast/lightweight Babel, their maintainers recommend to only use it when really needed (older Internet Explorer) (https://github.com/bublejs/buble).
The node version I used is v14.16.0, using nvm.
Without any dependencies (None) watch build times are very fast (1s maybe) before the updated CSS is emitted.
Without loading Bootstrap the compile is under 200ms. Is it just a reality that adding Bootstrap is going to add about 1-2 seconds and just have to accept that? I haven’t compared to using something esbuild which is meant to be blazingly fast.
I also set the “reloadDelay” to 0. A delay is only needed if you need to wait for file mirroring if using a VM. Is that correct?
Thank you for updating to Webpack 5 by the way. I just applied your changes to Sage 8.6.0 without any issues. Perhaps I should make that available as a fork.
For tailwind the devs apparently were able to solve the long build time by using a modified library (@tailwindcss/jit - npm).
https://discourse.roots.io/t/sage-10-browsersync-issue-with-reload/20314/26?u=strarsis
Node-sass has been deprecated in favor of Dart sass, which is now the reference implementation.
However, uncompiled, JavaScript Dart sass seems to be slower than a compiled binary (from what I read).
So maybe this is the underlying reason?
https://github.com/sass/dart-sass/issues/206
https://github.com/sass/dart-sass/issues/248
https://github.com/sass/dart-sass-embedded
Hey @strarsis
Thanks for all the hard work during this PR!
I’m currently migrating from Sage 9.0.9 to your PR and found that copy-webpack-plugin@7.0.0 was removed and v8.0.0 already released with some breaking changes.
I tested v8.0.0 on my end with an updated webpack config and it seems to work fine. Added a few suggestions there: https://github.com/roots/sage/pull/2607#pullrequestreview-615783459
Thanks again!
Hi Strarsis,
I’ve read up a little bit about dart-sass but still a little unclear. My understanding is using the Dart VM is much faster. Is that just a matter of installing Dart VM on my machine and then running webpack and it will be used for compiling instead of Dart-Sass JS, or will I need to make changes to the webpack config?
There is an issue for this in the sass repository:
It is closed now, but I wasn’t able to find a hint for setting this up.
Hi,
I’ve problem with background images in css and I’ve tried to install those version, but when I paste
composer create-project roots/sage your-theme-name dev-webpack5 --repository='{"type":"vcs","url":"https://github.com/strarsis/sage"}'
there is a problem:
[Seld\JsonLint\ParsingException]
"" does not contain valid JSON
Parse error on line 1:
{type:vcs,url:https:/
^
Expected one of: 'STRING', '}'
Is any one know what came frome that issue?
1 Like
What composer version are you using? 2 or 1?
And besides the major release, have you self-updated composer?
I can’t reproduce this issue when just copying+pasting the install command.
Also there seems to be a bug with PHP 7.x, so updating PHP 7.x on your workstation (that is used for the CLI/composer) can also help.
Hi,
I am a webdev student and very new to composer git ect. I got everything working but I don’t really know how to safely get out of the git(hub) repo? Im scared that I will commit something to your GitHub by accident. Can someone help me?
Sorry if this was a silly question.
You can’t push to another GitHub repository without proper authorization/authentication. Nothing can happen except an error message, don’t worry.
You can create your own GitHub repository with your own GitHub user and push to it.
1 Like
- What node version are you using?
- What framework have you selected?