Thanks for creating that! I pulled it and got the same error (I reinstalled the Node modules with Node 12).
My first guess is that it’s an issue with file-loader. Out of curiosity, created a vanilla Sage 9 project and copied the font stuff over. I got a different error.
▷ yarn build
yarn run v1.22.10
$ webpack --progress --config resources/assets/build/webpack.config.js
95% emitting
ERROR Failed to compile with 2 errors 3:58:06 PM
error in ./resources/assets/styles/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file:///Users/knowler/code/roots/sage-9/resources/assets/styles/main.scss:9446:3
at encodeError (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:219:12)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:14)
at /Users/knowler/code/roots/sage-9/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:5)
@ multi ./scripts/main.js ./styles/main.scss
error in ./resources/assets/styles/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file:///Users/knowler/code/roots/sage-9/resources/assets/styles/main.scss:9446:3
at encodeError (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:219:12)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:14)
at /Users/knowler/code/roots/sage-9/node_modules/webpack/lib/NormalModule.js:195:19
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/knowler/code/roots/sage-9/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at onFailure (/Users/knowler/code/roots/sage-9/node_modules/resolve-url-loader/index.js:176:5)
Asset Size Chunks Chunk Names
scripts/main.js 243 kB 0 [emitted] main
scripts/customizer.js 3.24 kB 1 [emitted] customizer
scripts/main.js.map 396 kB 0 [emitted] main
scripts/customizer.js.map 3.08 kB 1 [emitted] customizer
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This should have worked so I think there’s another underlying issue with the webpack config. I will continue to investigate this.
@ciromattia@knowler Hmm. Those changes didn’t work for me. They didn’t seem to cause any other issues, so I left them and then looked at downgrading resolve-url-loader and file-loader to previous versions or before breaking changes as those seemed most likely to be responsible based on the error message I was still getting.
The one change that removed any errors was moving to file-loader@5.1.0, which allowed me to successfully compile, however despite having no errors and the styles being applied, I’m not actually seeing the font display. In other words, the styles are applied and the font file appears to have loaded, but there is no actual change in appearance to the text itself. See attached. This font should be bold and set to Raleway but instead still has the same Tailwind defaults I had been seeing previously.
Hoping I’m not creating too big a mess here with version or dependency issues for these different packages. @ciromattia Your fonts were imported without error and on the front end they show up as expected?
@strarsis Thanks, I bumped file-loader down to 4.3.0 corresponding to the version used in that PR and fonts and Tailwind are working as expected for me without any issue.
After further investigation, RTFM and some mangling with webpack5 I got a completely working Sage 9 / TailwindCSS 2 / Webpack 5 / PostCSS 8 setup.
It’s a quite heavily customized sage install, so your mileage may vary, the main customizations are:
needs Node 10+ (webpack 5 requirement)
it’s TailwindCSS-tailored so if you want Bootstrap back you have to restore almost oll the styles and even jquery dependency
yeah, jquery is no more a dependency
it’s CSS-based so if you want to use SASS you have to rename the styles, though webpack config should support it out-of-the-box (but I made no tests); PostCSS manages imports, nesting and autoprefixing and TailwindCSS every other feature, so you should ask yourself if you really need SASS with an utility-first framework
uses webpack 5 new Assets Modules so file-loader and url-loader are gone for good
@joshb the watcher should be fully working, if you want to try it out.
Other than that, blade files are updating quickly and css files are injecting! Great news! It will be a little strange not running scss when needed but otherwise, this is nice. Thanks.
I’ll report back if I have issues with the browsersync loop thingymabobber.
I just got an issue with sage JS route mechanism not firing when watching, it’s an issue with the vanilla JS I changed in main.js so if your JS isn’t working change the last snippet in main.js with the following:
@strarsis with JQuery everything works flawlessly probably the ready() function does something under the hood, but I was trying to get rid of jQuery.
I assume that browsersync for some reason doesn’t emit DOMDocumentLoaded event, so I tried with the “update” method and it works:
if (document.readyState !== 'loading') {
routes.loadEvents();
}
I am testing this starter but unfortunately there is a problem. During yarn build: production purgecss removes almost all styles. The yarn build command loads all, even unused, styles. Tested on node12 and node14. Can you help me?
Going further with development I had some issues with PurgeCSS as managed by webpack, so I switched to the Tailwind-integrated one.
On the latest versions in my branch you can see I commented everything about PurgeCSS in resources/assets/build/webpack.config.optimize.js and switched on the purge section in resources/assets/styles/tailwind.config.js.
I came across the same issue after I finished building the whole site and realized that I never tested production.
The error seems to be that the purge arguments are set relative to the tailwind config, while it should be relative to the root folder. I am not sure if this is only a Windows/WSL problem, though.
So this fixed it in tailwind.config.js:
