No Source CSS shown in Developer Tools

sage
6

You could try the Sage 9.x update approach for Sage 10:

  1. (Should already be the case) The whole project is already under version control (assuming git).
  2. Project (working) directory is clean.
  3. Outside of the project directory, create a new sage 10 project from latest commit:
    composer create-project roots/sage sage10 dev-main
  4. Move the whole content (except git-ignored directories as vendor and node_modules (if existing)) from the directory of the newly created, unmodified Sage 10 theme (directory named sage10 in this example) into the project directory, overwrite everything with the new files.
  5. Use git CLI; a git-supporting IDE (like Visual Studio Code) and/or another GUI (e.g. TortoiseGit) to revert to/manually merge your modifications on top of the base Sage 10 theme, notably composer.json; style.css and package.json.
    The lockfiles could be reverted or reused - but I usually remove them and regenerate them with the new dependencies (it usually works just fine).
  6. Re-install the dependencies with the new files (composer install; npm install/yarn install).
  7. Adjust the configuration of the new build tool in newer Sage 10 iterations (bud instead of laravel-mix) (bud docs). For webpack configuration and other tasks bud doesn’t have an equivalent configuration or extension yet, use the bud API to modify the resulting webpack configuration directly. As bud also generates webpack configuration as laravel-mix did, the same webpack configuration should be reusable without significant modifications.
  8. Re-build the project (yarn build (which invokes bud)).
    Fix or correct any errors that occur during building (e.g. missed dependencies that weren’t re-applied to the new Sage 10 files).
  9. Test the result, does everything still work and look the same?
  10. Commit all the changes now, either directly to the default branch or to a dedicated branch for further testing. - Done.