First time with roots/bedrock/sage: CSS isn't being loaded in browser

sage
1

Hello,

My Sage CSS seems to not be loading. I am using MAMP. I have found a similar post with the same issue, but the description of what was ‘fixed’ wasn’t really made clear for me.
See the following link for previous post: Main.css, bootstrap, and other assets/resources are not loading in browser - #3 by snatera15

Here’s an attachment of what I see in my console:

Screen Shot 2015-09-11 at 12.00.56 AM.png1165×72 31.1 KB

Here’s what my page looks like:

Screen Shot 2015-09-11 at 12.07.09 AM.png848×636 53.7 KB

I checked the folders mentioned in the console errors to verify if the files were there, and they are and with all of the correct data. Maybe I am missing something very simple, but I could use some help if there’s a common happening here.

Thanks for any help!
Chad

2

Try adding define('WP_ENV', 'development'); to your wp-config.php if you’re not using Bedrock - https://roots.io/sage/docs/theme-installation/

Also make sure you run gulp and then gulp watch for MAMP. That is the development environment.

You only use gulp --production for live server or if you want to commit the dist folder (some people do it that way). - https://roots.io/sage/docs/theme-development-and-building/

Take it like you have 2 modes of the theme DEVELOPMENT and PRODUCTION and you switch between them with those commands. So after production you need to run gulp && gulp watch to get back into developer mode.

Oh and i noticed you’re missing the server name? or localhost:3000/ if using free mamp. So it may be a problem with your mamp setup.

4 Likes
3

@darjanpanic
To answer in order:
• I am using Bedrock
• Thanks for the gulp info. I wasn’t 100% I was doing it correctly, but now I see that I have been (which is a relief). I now have a better understanding with that in mind.
• Based on what you said about MAMP, I readjusted my settings(fixed my devUrl) and I now see the dev environment in my browser.

However, I still have the issue of not seeing the CSS. I took a closer look at the console errors and I see that those files have two forward slashes as opposed to the standard single forward slash (ex: http://app/themes/bowlnation-2015/dist/styles/main.css). To test to see if this was an issue, I removed the extra slash in developer tools and it worked. Any idea of how to apply this and have it output properly?

Thanks!

4

@darjanpanic
Oh wait, duh… The .env file had a trailing slash
(ex: incorrect:WP_HOME=http://localhost/ vs. correct: WP_HOME=http://localhost).

Thanks for your help!