<p>After some searching, I decided to move my src/ folder into the web/ folder, since Craft seems to be looking only there and not at anything above that directory. Then, my CSS links were updated to relative paths like this: src/css/typeplate.css. And that worked.</p>

CC BY-SA 4.0
2018-07-13T05:39:22.317Z
Glad you found a solution Chris!

If you're wondering _why_ many projects have CSS files in the /src folder, it's because often these days, people use an automated workflow to combine and compress multiple CSS/JS files from /src, and then place the result in /web

One of the tools for this is called Gulp (there's also Grunt), and https://nystudio107.com/blog/a-gulp-workflow-for-frontend-development-automation gives a great overview of how it works.
James Greig
CC BY-SA 4.0
2018-07-13T02:31:59.210Z
2018-07-13T02:31:59.210Z
Chris Treadwell
<p>I'm a UX designer with some front end skills (though a complete novice with server config and Craft). I'm hoping someone can help me with something that seems rather basic.</p>

<p><strong>Setup:</strong> 
Mac Book Pro running High Sierra (10.13.5).
Using MAMP 4.4.1 (free version)
PHP 7.2.1, MySQL, and Craft 3.
The site loads in a browser when I visit: <a href="http://localhost:8888/" rel="nofollow noreferrer">http://localhost:8888/</a>.</p>

<p>My craft files are here: Macintosh HD/Applications/MAMP/htdocs/.</p>

<p>The template file in question is here: Macintosh HD/Applications/MAMP/htdocs/templates/_layouts/base.html</p>

<p>In the base.html file, in the head section, I am attempting to link to several CSS files. Here's the entire head section:</p>

<pre><code>&lt;head&gt;
    {% block head %}
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      {% css %}
        &lt;link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/typeplate.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/grid.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/screen.css"&gt;
      {% endcss %}
    {% endblock %}
&lt;/head&gt;
</code></pre>

<p>The CSS files in question are here: Macintosh HD/Applications/MAMP/htdocs/src/css.</p>

<p><strong>The Problem:</strong>
When I load the home page, the CSS does not load. </p>

<p><strong>Things I've Tried:</strong></p>

<ul>
<li>I've tried removing the siteURL bit, and just hardcoding things
instead (like this: <a href="http://localhost/src/css/typeplate.css" rel="nofollow noreferrer">http://localhost/src/css/typeplate.css</a>), and I
get 404 errors for the 3 css files under the network tab in Chrome developer tools.</li>
<li>I've tried removing the {% css } brackets around the stylesheet links, and the network tab in Chrome dev tools just tells me "failed" when the links are hard coded. When the links have {{ siteUrl}} in them, I can see the browser looking for the files at www.mywebsite.com/src/css/typeplate.css. But the files aren't currently there - this is a local dev site only.</li>
<li>I've tried changing the dev siteUrl in general.php from "null" to
"<a href="http://localhost/" rel="nofollow noreferrer">http://localhost/</a>", and the web page stops loading altogether.</li>
<li>I've tried different hard coded URL's, like
(../src/css/typeplate.css).</li>
<li>I've searched StackExchange for similar problems, but I can't seem to make sense of any of the answers.</li>
</ul>

<p>Can anyone help? Thank you so much in advance.</p>

CC BY-SA 4.0
2018-07-10T22:30:55.863Z
"I've tried changing the dev siteUrl in general.php from "null" to "http://localhost/"" - try changing that to 'http://localhost:8888'. If it doesn't load, set `'devMode' => true` in your `craft/config/general.php` file, reload the page and see if you get an error.
Brad Bell
CC BY-SA 4.0
2018-07-10T23:28:55.770Z
Thanks so much for the suggestion, Brad. I tried both things, and the home page will not load. It says "This page isn’t working
localhost is currently unable to handle this request.
HTTP ERROR 500"
Chris Treadwell
CC BY-SA 4.0
2018-07-11T01:16:38.340Z
Strike my previous comment, Brad. I had a syntax problem (forgot the comma at the end of the row!). So, now there's no error. However, I still have the wrong file path, apparently. The browser is looking at http://localhost:8888/src/css/typeplate.css, and it says 404 for the CSS file in the network tab in Chrome developer tools. And when I put that file path into the browser's address bar directly, I get a craft 404 page that's got a bunch of stuff on it that I can't hardly make any sense of. What would be the file path for my src folder?
Chris Treadwell
CC BY-SA 4.0
2018-07-11T01:37:41.570Z
Update: after some searching, I decided to move my src/ folder into the web/ folder, since Craft seems to be looking only there and not at anything above that directory. Then, my CSS links were updated to relative paths like this: src/css/typeplate.css. And that worked.
Chris Treadwell
CC BY-SA 4.0
2018-07-11T23:17:22.450Z
Glad you're all sorted, Chris... would you mind adding your solution as an official answer in case it ends up helping someone in the future?
Brad Bell
<craft3><css><mamp>
CSS will not load Craft 3 + MAMP
# CSS will not load Craft 3 + MAMP

(Asked by: username_0 on 2018-07-10)

I'm a UX designer with some front end skills (though a complete novice with server config and Craft). I'm hoping someone can help me with something that seems rather basic.
Setup: 
Mac Book Pro running High Sierra (10.13.5).
Using MAMP 4.4.1 (free version)
PHP 7.2.1, MySQL, and Craft 3.
The site loads in a browser when I visit: http://localhost:8888/.
My craft files are here: Macintosh HD/Applications/MAMP/htdocs/.
The template file in question is here: Macintosh HD/Applications/MAMP/htdocs/templates/_layouts/base.html
In the base.html file, in the head section, I am attempting to link to several CSS files. Here's the entire head section:

    {% block head %}
      
      
      {% if title is defined %}{{ title }} - {% endif %}{{ siteName }}
      
      {% css %}
        
        
        
      {% endcss %}
    {% endblock %}


The CSS files in question are here: Macintosh HD/Applications/MAMP/htdocs/src/css.
The Problem:
When I load the home page, the CSS does not load. 
Things I've Tried:

I've tried removing the siteURL bit, and just hardcoding things
instead (like this: http://localhost/src/css/typeplate.css), and I
get 404 errors for the 3 css files under the network tab in Chrome developer tools.
I've tried removing the {% css } brackets around the stylesheet links, and the network tab in Chrome dev tools just tells me "failed" when the links are hard coded. When the links have {{ siteUrl}} in them, I can see the browser looking for the files at www.mywebsite.com/src/css/typeplate.css. But the files aren't currently there - this is a local dev site only.
I've tried changing the dev siteUrl in general.php from "null" to
"http://localhost/", and the web page stops loading altogether.
I've tried different hard coded URL's, like
(../src/css/typeplate.css).
I've searched StackExchange for similar problems, but I can't seem to make sense of any of the answers.

Can anyone help? Thank you so much in advance.

**Tags:** craft3, css, mamp

> **Comments:**
> **username_1**: "I've tried changing the dev siteUrl in general.php from "null" to "http://localhost/"" - try changing that to 'http://localhost:8888'. If it doesn't load, set `'devMode' => true` in your `craft/config/general.php` file, reload the page and see if you get an error.  
> **username_0**: Thanks so much for the suggestion, Brad. I tried both things, and the home page will not load. It says "This page isn’t working localhost is currently unable to handle this request. HTTP ERROR 500"  
> **username_0**: Strike my previous comment, Brad. I had a syntax problem (forgot the comma at the end of the row!). So, now there's no error. However, I still have the wrong file path, apparently. The browser is looking at http://localhost:8888/src/css/typeplate.css, and it says 404 for the CSS file in the network tab in Chrome developer tools. And when I put that file path into the browser's address bar directly, I get a craft 404 page that's got a bunch of stuff on it that I can't hardly make any sense of. What would be the file path for my src folder?  
> **username_0**: Update: after some searching, I decided to move my src/ folder into the web/ folder, since Craft seems to be looking only there and not at anything above that directory. Then, my CSS links were updated to relative paths like this: src/css/typeplate.css. And that worked.  
> **username_1**: Glad you're all sorted, Chris... would you mind adding your solution as an official answer in case it ends up helping someone in the future?  

---

## 1 answers

### Answer by username_0 on 2018-07-13. Score: 2 | Accepted answer

After some searching, I decided to move my src/ folder into the web/ folder, since Craft seems to be looking only there and not at anything above that directory. Then, my CSS links were updated to relative paths like this: src/css/typeplate.css. And that worked.

> **Comments:**
> **username_2**: Glad you found a solution Chris!  If you're wondering _why_ many projects have CSS files in the /src folder, it's because often these days, people use an automated workflow to combine and compress multiple CSS/JS files from /src, and then place the result in /web  One of the tools for this is called Gulp (there's also Grunt), and https://nystudio107.com/blog/a-gulp-workflow-for-frontend-development-automation gives a great overview of how it works.  

---

