Need Help: confused with asset precompilation

Sharetribe Go Community Edition
1

Hey Sharetribe Community

I am created a new page and having difficulty including my own custom sass file in the app.

I have added a _custom_page.css.scss under the assets/stylesheets/views directory and expected it to be included when the assets precompile – in application.scss //= require_tree ./views

I feel I am missing a vital piece of the puzzle

Thanks for your help
Matt

2

Sounds strange - it should work the way you described.

To test this I added one file to the folder and after that my application.css contained:

/* line 1, /Users/vesa/sharetribe/app/assets/stylesheets/views/qwerty.css.scss */

.qwerty {
  display: block;
}

BR,
Vesa

3

Thanks for getting back to me, I did try this still no luck.

route:
get ‘/new_page’ => ‘testing#new_page’

controller:
class TestingController < ApplicationController
def new_page
end
end

page:
new_page.html.haml

.special_text
%p hello this is new page text

scss:
sharetribe/app/assets/stylesheets/views

.special_text {
p {
font-size: 50px;
}
}

application.scss:
// The fonts file has to be the first one, since there are @imports in the fonts file
//= require ./fonts

// Vendor
//= require jquery.nouislider
//= require jquery.fileupload
//= require datepicker3
//= require selectize

//= require ./reset
//= require ./main

//= require_tree ./partials
//= require_tree ./views

Do you see anything incorrect with the code?

4

If you end up to page that actually says “hello this is new page text”, I think you should have everything in place.
The only thing I don’t see from your example is indentation. Haml is very strict about that so I hope you have indented %p inside of div (.special_text).

.special_text
  %p hello this is new page text

P.S. I highly recommend that you don’t add styles to tags (like <p>) but only to classes (except in some kind of global normalize/reset.scss file) - it makes life so much easier.

5

Thanks Vessa, last Q in the previous answer were you referring to application.css or app-bundle.css?

Cheers

6

application.css. That’s the only place where we use SASS (or should I say .scss files).

Webpack generates app-bundle.css and it is added to application.haml (through partial called _marketplace_head.haml). App-bundle contains styles that are only used by new React components.