No Source CSS shown in Developer Tools

sage
1

Hi,
im using sage10 and i deployed a site to production. Everything looks good and all styles get applied, but when i inspect the css with the devtools all the tailwind styles got a no source tag and when i switch to the source tab i get: “Could not load content for webpack:/// (HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)”.

How can i fix this? Thanks for your help!
Andi

2

Looks like you somehow deployed the dev version of your build assets. Did you run yarn build:production?

3

Yes, i did and everything compiled successfully. But when i look into public/styles/app.css.map there is still webpack in there {"version":3,"sources":["webpack:///./resources/styles/common/pages/video.scss",". Can this be related to this post: Sourcemaps not working with Sage 9.05 + tailwind.js ?

4

Unlikely, since Sage 9 used an entirely different build system. Since you’re on Sage 10, this may be an issue with Bud. You should look through the existing Bud issues on Github, as well as in this forum.

1 Like
5

Thanks for your reply. Im using an older version of sage10 which is using Mix. Is there a way to fix this manually?

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.
7

Thanks for your reply. Will try that!