Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T05:39:22.317Z
Answers.Text: 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.
Answers.UserDisplayName: James Greig
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T02:31:59.210Z
Answers.LastActivityDate: 2018-07-13T02:31:59.210Z
Answers.UserDisplayName: Chris Treadwell
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-07-10T22:30:55.863Z
Comments.Text: "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.
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-07-10T23:28:55.770Z
Comments.Text: 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"
Comments.UserDisplayName: Chris Treadwell
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-07-11T01:16:38.340Z
Comments.Text: 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?
Comments.UserDisplayName: Chris Treadwell
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-07-11T01:37:41.570Z
Comments.Text: 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.
Comments.UserDisplayName: Chris Treadwell
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-07-11T23:17:22.450Z
Comments.Text: 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?
Comments.UserDisplayName: Brad Bell
Tags: <craft3><css><mamp>
Title: CSS will not load Craft 3 + MAMP
ThreadText: # 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:
  
  ```
  <head>
      {% block head %}
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <title>{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% css %}
          <link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/typeplate.css">
          <link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/grid.css">
          <link rel="stylesheet" type="text/css" href="{{ siteUrl }}src/css/screen.css">
        {% endcss %}
      {% endblock %}
  </head>
  
  ```
  
  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, username_1. 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, username_1. 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, username_0... 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 username_0!  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.  
  
  ---
  
  