Sage: Sage 9.0.10 - postcss.config.js not working

[wouter-85]

• [x] I've read the guidelines for Contributing to Roots Projects
• [x] This request isn't a duplicate of an existing issue
• [x] I've read the docs and followed them (if applicable)
• [x] This is not a personal support request that should be posted on the Roots Discourse community

Description

After the latest release postcss.config.js gives an error, this

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Steps to reproduce

1. Installed a fresh copy and and use yarn start && yarn build
2. Installed a fresh copy of version 9.0.9, this works like expected

Expected behavior:
Everything for building the website works like a charm

Actual behavior:
The template building does not work like it should work, for example I'm unable to load custom fonts in version 9.0.10 because postcss.config.js doesn't work during development

Reproduces how often:
This issue occured since the latest version 9.0.10

Versions

9.0.10

[idev-hub]

No solution yet?

[retlehs]

sage 9 is not in active development and the latest release has some issues in certain scenarios

you can use the previous sage 9 release, or we are happy to pay for anyone's time to submit PRs for the sage 9.x branch

[salty-walty]

To anyone else hung up on this, I found a workaround. My version of this issue was not font related, but rather image related. I was trying to use a background image in my css and stumbled across the same errors.

In looking for a solution, others were suggesting just rolling back to 9.0.9 which certainly worked. That said, I thought it would be nice to just roll back the packages that were at the root of this issue for me rather than rolling back a full version. With that, I narrowed this issue down to a few specific dev dependencies and changed them to the following versions:

"postcss-loader": "~2.1.0",
"postcss-safe-parser": "~3.0",
"resolve-url-loader": "~2.3.1",
"url-loader": "^0.6.2",

After updating my package.json to have those older dev dependencies from 9.0.9, deleting my node_modules, and running a:

yarn && yarn start

my version of this issue worked itself out. Hope that helps anyone else who's currently down this rabbit hole!

[strarsis]

An update to webpack 5 for sage 9.x, WIP: https://github.com/strarsis/sage/tree/webpack5
This also fixes other issues like [Object] or a resolve error when an image is inlined in the styles, BrowserSync, etc.
Changes are surprisingly small for a webpack update between two major versions.

[Jacksoor]

I also had to change:
"file-loader": "^1.1.6"
Maybe the fix detailed here is enough.

[strarsis]

@Jacksoor: You may be interested in trying out this PR: https://github.com/strarsis/sage/tree/webpack5

[Jacksoor]

@strarsis Yes thank you, I managed to get your PR working by replacing my package.json, yarn.lock and all scripts in resources/assets/build.
BrowserSync seems more stable and StyleLint is also working now where before I had to disable it.
Really hope Sage 10 is comming soon or they merge your PR.