I’ve been going through Chapter 7 of Intermediate Concepts - and none of my scss styles are appearing on the site.
I’ve installed libsass:
mbp:openoppscom sn$ pip install libsass
Requirement already satisfied (use --upgrade to upgrade): libsass in /Library/Frameworks/Python.framework/Versions/3.4/lib/python3.4/site-packages
Requirement already satisfied (use --upgrade to upgrade): six in /Library/Frameworks/Python.framework/Versions/3.4/lib/python3.4/site-packages (from libsass)
I’ve installed gulp and it is working (or at least I’m getting what looks like the right output from gulp) and the gulp output updates every time I save the style.scss file.
gulp
[16:06:11] Using gulpfile ~/git/openoppscom/gulpfile.js
[16:06:11] Starting 'sass'...
[16:06:11] Starting 'css'...
[16:06:11] Starting 'scripts'...
[16:06:11] Starting 'watch'...
[16:06:11] Finished 'watch' after 47 ms
[16:06:11] Finished 'css' after 461 ms
[16:06:11] Finished 'scripts' after 461 ms
[16:06:11] Starting 'css'...
[16:06:11] Finished 'css' after 257 ms
[16:06:12] Finished 'sass' after 988 ms
[16:06:12] Starting 'default'...
[16:06:12] Finished 'default' after 6.94 μs
I’ve got a new file called style.scss in my .scss folder which has all of my custom css in it, and the command to import bootrap as follows:
/*addtothetopofthefile*/
@import "bootstrap";
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
font-family: "Lora", sans-serif;
margin-bottom: 0.2em;
margin-top: 0.2em;
color: #404040;
}
...
I’m linking to the .scss file in my base.html , as follows:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
{% block title %}
Openopps.com - every tender, free, forever.
{% endblock title %}
</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" type="text/css">
<link href="{% static 'scss/style.scss' %}" rel="stylesheet">
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
{% block header %}{% endblock header %}
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
...
You can see the style.scss file is in the right place and that I have package.json in the right place…
But when I look at my website I get no styling at all. My logo is showing, so that means that {% load static %} is working correctly, and even if the styles.scss it isn’t importing bootstrap my own styles should be working. Unless I have to register the scss django should be fetching it properly. Any idea what I’ve done wrong?