So I have my imports in a different file collecting the styles of different parts of the webstite. Now the styles of all the pieces are working just fine, except, sidebar.sass For some reason none of the styles I apply in that file are being displayed. I've tried remaking the file and reimporting but it just doesn't seem to work. Please look at the files below to see what i'm doing.
Import file:
@import header.sass
@import header-image.sass
@import homepage-content.sass
@import sidebar.sass
@import footer.sass
sidebar.sass
.siderbar
@extend .col-xs-12
.search-location
@extend .col-xs-12
color: #96c11f
.white
color: white
.search-bar
font-size: 12px
color: #ef7d00
.input-group
@extend .col-xs-12
#custom-search-input
padding: 3px
border: solid 1px #E4E4E4
border-radius: 6px
background-color: #fff
#custom-search-input input
border: 0
box-shadow: none
#custom-search-input button
margin: 2px 0 0 0
background: none
box-shadow: none
border: 0
color: #666666
padding: 0 8px 0 10px
border-left: solid 1px #ccc
#custom-search-input button:hover
border: 0
box-shadow: none
border-left: solid 1px #ccc
.new-location
@extend .col-xs-12
background-color: #ef7d00
h1
color: white
img
width: 100%
sidebar.jade
.sidebar
.search-location
p Big bread kitchen
p.white Bij jou in de buurt
p.search-text zoek op uw postcode
.search-bar
#custom-search-input
.input-group
input.form-control.input-lg(type="text", placeholder="Zoek...")
span.input-group-btn
button.btn.btn-info.btn-lg(type="button")
p go
.new-location
h1 Nieuwe vesting
img(src="images/naarden.jpg")
.order-online
p.white De lekkerste broodjes en snacks
h3 Online
span bestellen
.save
h3 Sparen
Map structure: http://prntscr.com/flhmco It was a simple typo, my bad.
It seems like you are defining an incorrect class in sidebar.sass file. In sidebar.jade the first class is .sidebar
, but in sidebar.sass it is .siderbar
.
sidebar.sass:
.sidebar
@extend .col-xs-12
...
sidebar.jade:
.sidebar
.search-location
...