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.
'devMode' => true
in yourcraft/config/general.php
file, reload the page and see if you get an error. – Brad Bell Jul 10 '18 at 22:30